// Hot Perrote — standalone Carta page app.
const { NavBar, NeonHeading, Button, ProductCard, ComboCard, Chip, FlameAccent, Icon } = window.HotPerroteDesignSystem_2cf767;

const TABS =[["perrotes", "Perrotes"], ["especiales", "Especialidades"], ["entradas", "Entradas"], ["nachotes", "Nachotes"], ["combos", "Combos"], ["postres", "Postres"], ["batidos", "Batidos & Smoothies"], ["bebidas", "Bebidas"], ["cocteles", "Cócteles"], ["copas", "Copas & Vinos"]];
const NAV = ["Inicio", "Nosotros", "Menú", "Sucursales", "Club Hot Perrote", "Franquicias", "Contacto"];

function TextGrid({ items, note }) {
  return (
    <div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill,minmax(250px,1fr))", gap: 18 }}>
        {items.map((b, i) => (
          <div key={i} className="hp-cardin hp-card" style={{ animationDelay: `${i * 55}ms`, background: "rgba(10,10,10,.7)", border: "1px solid var(--color-border)", borderRadius: "var(--radius-md)", padding: 20 }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 10 }}>
              <h4 style={{ fontFamily: "var(--font-display)", fontSize: 20, color: "#fff", textTransform: "uppercase", margin: 0 }}>{b.name}</h4>
              <span style={{ fontFamily: "var(--font-display)", fontSize: 20, color: "var(--hp-yellow)", whiteSpace: "nowrap" }}>{b.price}</span>
            </div>
            {b.desc && <p style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "var(--hp-gray)", margin: "8px 0 0", lineHeight: 1.4 }}>{b.desc}</p>}
          </div>
        ))}
      </div>
      {note && <p style={{ marginTop: 16, fontFamily: "var(--font-body)", fontSize: 13, color: "var(--hp-red)", fontWeight: 700 }}>{note}</p>}
    </div>
  );
}
function ProductGrid({ items, note }) {
  return (
    <div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill,minmax(300px,1fr))", gap: 22, justifyItems: "center" }}>
        {items.map((p, i) => (
          <div key={p.id || i} className="hp-cardin" style={{ animationDelay: `${i * 55}ms`, width: "100%", maxWidth: 360 }}>
            <ProductCard image={p.img} name={p.name} description={p.desc} price={`${p.price} MXN`} badge={p.badge} badgeTone={p.badgeTone || "yellow"} style={{ width: "100%" }} />
          </div>
        ))}
      </div>
      {note && <p style={{ marginTop: 16, fontFamily: "var(--font-body)", fontSize: 13, color: "var(--hp-red)", fontWeight: 700 }}>{note}</p>}
    </div>
  );
}
function DrinkRow({ n, d, p }) {
  return (
    <div style={{ display: "flex", justifyContent: "space-between", gap: 16, padding: "11px 0", borderBottom: "1px dashed rgba(255,255,255,.1)" }}>
      <div>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 17, color: "#fff", textTransform: "uppercase", lineHeight: 1.1 }}>{n}</div>
        {d && <div style={{ fontFamily: "var(--font-body)", fontSize: 12.5, color: "var(--hp-gray)", marginTop: 3, maxWidth: 460, lineHeight: 1.4 }}>{d}</div>}
      </div>
      <div style={{ fontFamily: "var(--font-display)", fontSize: 17, color: "var(--hp-yellow)", whiteSpace: "nowrap" }}>{p}</div>
    </div>
  );
}
function CopaRow({ n, copa, mini }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr auto auto", gap: 20, alignItems: "center", padding: "10px 0", borderBottom: "1px dashed rgba(255,255,255,.1)" }}>
      <div style={{ fontFamily: "var(--font-display)", fontSize: 16, color: "#fff", textTransform: "uppercase" }}>{n}</div>
      <div style={{ fontFamily: "var(--font-display)", fontSize: 16, color: "var(--hp-yellow)", width: 54, textAlign: "right" }}>{copa}</div>
      <div style={{ fontFamily: "var(--font-display)", fontSize: 16, color: "#fff", width: 54, textAlign: "right", opacity: .85 }}>{mini}</div>
    </div>
  );
}
function CatBlock({ title, cols, children }) {
  return (
    <div className="hp-card" style={{ background: "#0e0e0e", border: "1px solid rgba(255,255,255,.08)", borderRadius: 16, padding: "16px 20px 10px", breakInside: "avoid" }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 9, margin: "0 0 8px" }}>
        <h3 style={{ fontFamily: "var(--font-display)", fontSize: 20, color: "var(--hp-red)", textTransform: "uppercase", margin: 0, display: "flex", alignItems: "center", gap: 9 }}>
          <FlameAccent size={18} color="var(--hp-red)" />{title}
        </h3>
        {cols && (
          <div style={{ display: "flex", gap: 20 }}>
            {cols.map((c, i) => (
              <span key={i} style={{ width: 54, textAlign: "right", fontFamily: "var(--font-body)", fontWeight: 800, fontSize: 11, letterSpacing: ".05em", textTransform: "uppercase", color: "var(--hp-gray)" }}>{c}</span>
            ))}
          </div>
        )}
      </div>
      {children}
    </div>
  );
}
function Cocteles() {
  return (
    <div>
      <NeonHeading color="yellow" size="display" as="h2" style={{ marginBottom: 18 }}>Los Cocktails <span style={{ color: "var(--hp-red)", textShadow: "var(--glow-red)" }}>Más Perrotes</span></NeonHeading>
      <div className="hp-masonry">
        {window.HP.cocteles.map((g) => (
          <CatBlock key={g.cat} title={g.cat}>{g.items.map((it, i) => <DrinkRow key={i} {...it} />)}</CatBlock>
        ))}
      </div>
      <CatBlock title="Las Micheladas Más Perrotas">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18, alignItems: "start" }}>
          {window.HP.micheladas.map((it, i) => <DrinkRow key={i} {...it} />)}
        </div>
      </CatBlock>
      <CatBlock title="Otros Cocktails">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18, alignItems: "start" }}>
          {window.HP.otrosCocteles.map((it, i) => <DrinkRow key={i} {...it} />)}
        </div>
      </CatBlock>
      <div style={{ marginTop: 18, fontFamily: "var(--font-body)", fontSize: 13, color: "var(--hp-red)", fontWeight: 700, textTransform: "uppercase", letterSpacing: ".04em" }}></div>
    </div>
  );
}
function Copas() {
  return (
    <div>
      <NeonHeading color="yellow" size="display" as="h2" style={{ marginBottom: 18 }}>Los Tragos <span style={{ color: "var(--hp-red)", textShadow: "var(--glow-red)" }}>Más Perrotes</span></NeonHeading>
      <div className="hp-masonry">
        {window.HP.copas.map((g) => (
          <CatBlock key={g.cat} title={g.cat} cols={["Copa", "Litro"]}>{g.items.map((it, i) => <CopaRow key={i} {...it} />)}</CatBlock>
        ))}
        <CatBlock title="Vino">{window.HP.vinos.map((v, i) => <DrinkRow key={i} n={v.n} p={v.p} />)}</CatBlock>
        <CatBlock title="Vermú">{window.HP.vermu.map((v, i) => <DrinkRow key={i} n={v.n} p={v.p} />)}</CatBlock>
        <CatBlock title="Shots"><DrinkRow n="Shots" d="Pregunta por los del día." p={window.HP.chupitos} /></CatBlock>
      </div>
      <div style={{ marginTop: 14, fontFamily: "var(--font-body)", fontSize: 13, color: "var(--hp-red)", fontWeight: 700, textTransform: "uppercase", letterSpacing: ".04em" }}></div>
    </div>
  );
}
function BebidasSinAlcohol() {
  return (
    <div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill,minmax(250px,1fr))", gap: 18 }}>
        {window.HP.bebidas.map((b, i) => (
          <div key={i} className="hp-cardin hp-card" style={{ animationDelay: `${i * 55}ms`, background: "rgba(10,10,10,.7)", border: "1px solid var(--color-border)", borderRadius: "var(--radius-md)", padding: 20 }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 10 }}>
              <h4 style={{ fontFamily: "var(--font-display)", fontSize: 20, color: "#fff", textTransform: "uppercase", margin: 0 }}>{b.name}</h4>
              <span style={{ fontFamily: "var(--font-display)", fontSize: 20, color: "var(--hp-yellow)" }}>{b.price}</span>
            </div>
            <p style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "var(--hp-gray)", margin: "8px 0 0", lineHeight: 1.4 }}>{b.desc}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

function CartaApp() {
  const initial = (location.hash || "").replace("#", "") || "perrotes";
  const [tab, setTab] = React.useState(TABS.some(t => t[0] === initial) ? initial : "perrotes");
  const [menuOpen, setMenuOpen] = React.useState(false);
  const navHidden = window.HPNavScroll() && !menuOpen;
  window.HPLogoHome();

  const nav = (label) => {
    if (label === "Menú") { setTab("perrotes"); window.scrollTo({ top: 0, behavior: "smooth" }); return; }
    if (label === "Combos") { setTab("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": "", "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%), #060606" }} />
      <div style={{ position: "relative", zIndex: 1 }}>
        <NavBar active="Menú" items={NAV} onNavigate={nav} onCta={() => setTab("perrotes")} 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 === "Menú" ? "on" : ""} onClick={(e) => { e.preventDefault(); nav(l); setMenuOpen(false); }}>{l}</a>
          ))}
        </div>

        <section style={{ padding: "48px 6vw 20px", maxWidth: 1280, margin: "0 auto" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", flexWrap: "wrap", gap: 20 }}>
            <div>
              <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
                <NeonHeading color="white" size="hero" as="h1">Menú<br /><span style={{ color: "var(--hp-yellow)", textShadow: "var(--glow-yellow)" }}>más perrote</span></NeonHeading>
              </div>
              <p style={{ fontFamily: "var(--font-body)", fontWeight: 700, textTransform: "uppercase", letterSpacing: ".06em", color: "#fff", margin: "10px 0 0" }}>Elige tu favorito</p>
            </div>
            <div style={{ border: "1px solid var(--hp-red)", borderRadius: "var(--radius-md)", padding: "16px 22px", display: "flex", alignItems: "center", gap: 14 }}>
              <FlameAccent size={40} color="var(--hp-red)" />
              <div style={{ maxWidth: 320 }}>
                <div style={{ fontFamily: "var(--font-display)", color: "var(--hp-yellow)", fontSize: 26, lineHeight: 1 }}>100% sabor perrote</div>
                <div style={{ fontFamily: "var(--font-body)", fontWeight: 700, fontSize: 13, color: "#fff", marginTop: 6, lineHeight: 1.4 }}>
                  Con salchicha de 23 cm 100% carne de res, pan brioche, toppings brutales y un toque <span style={{ color: "var(--hp-red)" }}>HOT</span> único.
                </div>
              </div>
            </div>
          </div>

          <div style={{ display: "flex", gap: 10, margin: "28px 0 34px", flexWrap: "wrap" }}>
            {TABS.map(([id, l]) => (
              <Chip key={id} active={tab === id} onClick={() => setTab(id)}>{l}</Chip>
            ))}
          </div>

          <div key={tab} className="hp-tabpane">
            {tab === "perrotes" && (
              <div>
                <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill,minmax(340px,1fr))", gap: 26, justifyItems: "center" }}>
                  {window.HP.perrotes.map((p, i) => (
                    <div key={p.id} className="hp-cardin" style={{ animationDelay: `${i * 55}ms`, width: "100%", maxWidth: 400 }}>
                      <ProductCard image={p.img} name={p.name} description={p.desc} price={`${p.price} MXN`}
                        badge={p.badge} badgeTone={p.badgeTone || "yellow"} style={{ width: "100%" }} />
                    </div>
                  ))}
                </div>
                <p style={{ textAlign: "center", marginTop: 24, fontFamily: "var(--font-display)", fontSize: 17, color: "var(--hp-yellow)", textTransform: "uppercase" }}>{window.HP.hazloMenu}</p>
              </div>
            )}
            {tab === "especiales" && <ProductGrid items={window.HP.especiales} />}
            {tab === "entradas" && <ProductGrid items={window.HP.entradas} />}
            {tab === "nachotes" && <ProductGrid items={window.HP.nachotes} note={window.HP.nachotesNota} />}
            {tab === "postres" && <ProductGrid items={window.HP.postres} note={window.HP.postresNota} />}
            {tab === "batidos" && (
              <div>
                <h3 style={{ fontFamily: "var(--font-display)", color: "var(--hp-red)", textTransform: "uppercase", fontSize: 21, margin: "0 0 12px" }}>Batidos helados</h3>
                <TextGrid items={window.HP.batidos} />
                <h3 style={{ fontFamily: "var(--font-display)", color: "var(--hp-red)", textTransform: "uppercase", fontSize: 21, margin: "26px 0 12px" }}>Smoothies</h3>
                <TextGrid items={window.HP.smoothies} />
              </div>
            )}
            {tab === "combos" && (
              <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill,minmax(280px,1fr))", gap: 26 }}>
                {window.HP.combos.map((c, i) => (
                  <div key={i} className="hp-cardin hp-combo" style={{ animationDelay: `${i * 55}ms` }}>
                    <ComboCard tag={c.tag} name={c.name} accent={c.accent} items={c.items} price={c.price} image={c.img} />
                  </div>
                ))}
              </div>
            )}
            {tab === "cocteles" && <Cocteles />}
            {tab === "copas" && <Copas />}
            {tab === "bebidas" && <BebidasSinAlcohol />}
          </div>
        </section>

        {/* Agrega más a tu perrote — solo en la categoría Perrotes */}
        {tab === "perrotes" && (
        <section style={{ padding: "10px 6vw 60px", maxWidth: 1280, margin: "0 auto" }}>
          <div className="hp-topping-card" style={{ border: "1px solid var(--color-border)", borderRadius: "var(--radius-lg)", padding: "24px 26px", display: "flex", alignItems: "center", gap: 26, flexWrap: "wrap", background: "rgba(10,10,10,.6)" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 14, minWidth: 190 }}>
              <FlameAccent size={68} color="var(--hp-red)" />
              <div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 24, color: "#fff", textTransform: "uppercase", lineHeight: 1 }}>Agrega más<br />a tu perrote</div>
                <div style={{ fontFamily: "var(--font-body)", fontWeight: 700, fontSize: 12, color: "var(--hp-yellow)", textTransform: "uppercase", marginTop: 6 }}>¡Tú lo haces único!</div>
              </div>
            </div>
            <div className="hp-topping-grid" style={{ display: "flex", gap: 14, flexWrap: "wrap", flex: 1, justifyContent: "center" }}>
              {window.HP.toppings.map((t) => (
                <div key={t.name} style={{ textAlign: "center", width: 96 }}>
                  <div style={{ width: 68, height: 68, borderRadius: "50%", margin: "0 auto 8px", overflow: "hidden",
                    border: "1.5px solid var(--hp-red)", position: "relative",
                    background: "radial-gradient(circle, rgba(255,49,49,.12), transparent 70%)" }}>
                    {t.img
                      ? <img src={t.img} alt={t.name} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
                      : <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center" }}><FlameAccent size={26} color="var(--hp-red)" glow={false} /></div>}
                  </div>
                  <div style={{ fontFamily: "var(--font-body)", fontWeight: 700, fontSize: 11, textTransform: "uppercase", color: "#fff", lineHeight: 1.15 }}>{t.name}</div>
                  <div style={{ fontFamily: "var(--font-display)", fontSize: 15, color: "var(--hp-yellow)" }}>{t.price}</div>
                </div>
              ))}
            </div>
          </div>
          <div style={{ textAlign: "center", marginTop: 34 }}>
            <Button variant="primary" size="lg" onClick={() => { window.open("https://wa.me/523333389988", "_blank", "noopener,noreferrer"); }}>Haz tu pedido</Button>
          </div>
        </section>
        )}

        <div style={{ textAlign: "center", padding: "0 6vw 30px", fontFamily: "var(--font-body)", fontSize: 11.5, color: "var(--hp-gray)", opacity: .75 }}>* Aviso legal: todas las imágenes son representativas.</div>

        <HPFooterInfo />
      </div>
    </div>
  );
}

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