// Hot Perrote landing — mid sections: Menú, Experiencia, Sucursales. Exposes window.HPMid.
const { NeonHeading, Button, ProductCard, ComboCard, Chip, Badge, FlameAccent, Icon } = window.HotPerroteDesignSystem_2cf767;
const { Perrote } = window.HPWord;

function PhotoCard({ p, i }) {
  return (
    <div className="hp-cardin hp-card" style={{ animationDelay: `${i * 55}ms`, background: "#0e0e0e",
      border: "1px solid rgba(255,255,255,.08)", borderRadius: 18, overflow: "hidden",
      display: "flex", flexDirection: "column", boxShadow: "0 10px 30px rgba(0,0,0,.45)" }}>
      <div style={{ position: "relative", height: 190, background: "#000" }}>
        {p.img
          ? <img src={p.img} alt={p.name} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
          : <div style={{ width: "100%", height: "100%", display: "grid", placeItems: "center", background: "radial-gradient(circle at 50% 40%, rgba(255,49,49,.18), #0e0e0e 70%)" }}><FlameAccent size={54} color="var(--hp-red)" glow /></div>}
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg,transparent 55%,rgba(14,14,14,.9))" }} />
        {p.badge && (
          <span style={{ position: "absolute", top: 12, left: 12, fontFamily: "var(--font-body)", fontWeight: 800,
            fontSize: 11, textTransform: "uppercase", letterSpacing: ".05em", padding: "5px 11px", borderRadius: 999,
            background: p.badgeTone === "red" ? "var(--hp-red)" : p.badgeTone === "outline" ? "transparent" : "var(--hp-yellow)",
            color: p.badgeTone === "red" ? "#fff" : p.badgeTone === "outline" ? "var(--hp-red)" : "#000",
            border: p.badgeTone === "outline" ? "1.5px solid var(--hp-red)" : "none" }}>{p.badge}</span>
        )}
      </div>
      <div style={{ padding: "14px 18px 18px" }}>
        <h4 style={{ fontFamily: "var(--font-display)", fontSize: 24, color: "#fff", textTransform: "uppercase", margin: 0, lineHeight: 1 }}>{p.name}</h4>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 12, marginTop: 8 }}>
          <p style={{ fontFamily: "var(--font-body)", fontSize: 13.5, color: "var(--hp-gray)", margin: 0, lineHeight: 1.4, flex: 1 }}>{p.desc}</p>
          <div style={{ whiteSpace: "nowrap", textAlign: "right" }}>
            <span style={{ fontFamily: "var(--font-display)", fontSize: 26, color: "var(--hp-yellow)", textShadow: "var(--glow-yellow)" }}>{p.price}</span>
            <span style={{ fontFamily: "var(--font-body)", fontSize: 11, color: "var(--hp-gray)", marginLeft: 4 }}>MXN</span>
          </div>
        </div>
      </div>
    </div>
  );
}

function TextCard({ b, i }) {
  return (
    <div className="hp-cardin hp-card" style={{ animationDelay: `${i * 55}ms`, background: "rgba(10,10,10,.7)",
      border: "1px solid rgba(255,255,255,.08)", borderRadius: 14, padding: 18 }}>
      <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: "6px 0 0", lineHeight: 1.4 }}>{b.desc}</p>
    </div>
  );
}

function Menu({ go }) {
  const [tab, setTab] = React.useState("hotdogs");
  const TABS = [["hotdogs", "Perrotes"], ["especiales", "Especialidades"], ["entradas", "Entradas"], ["combos", "Combos"], ["postres", "Postres"], ["bebidas", "Bebidas"]];
  const gridPhoto = { display: "grid", gridTemplateColumns: "repeat(auto-fill,minmax(300px,1fr))", gap: 22 };
  const gridText = { display: "grid", gridTemplateColumns: "repeat(auto-fill,minmax(240px,1fr))", gap: 16 };
  return (
    <section data-screen-label="Menú" style={{ padding: "72px 6vw", maxWidth: 1240, margin: "0 auto" }}>
      <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", flexWrap: "wrap", gap: 16 }}>
        <div>
          <NeonHeading color="white" size="display" as="h2">Menú <span style={{ color: "var(--hp-yellow)", textShadow: "var(--glow-yellow)" }}>más <Perrote /></span></NeonHeading>
          <p style={{ fontFamily: "var(--font-body)", fontSize: 17, color: "var(--hp-gray)", margin: "8px 0 0" }}>Elige tu favorito. Tú lo haces único.</p>
        </div>
        <div style={{ border: "1px solid var(--hp-red)", borderRadius: "var(--radius-md)", padding: "12px 18px", textAlign: "right", display: "flex", alignItems: "center", gap: 12 }}>
          <FlameAccent size={30} color="var(--hp-red)" />
          <div>
            <div style={{ fontFamily: "var(--font-display)", color: "var(--hp-yellow)", fontSize: 22, lineHeight: 1 }}>100% sabor perrote</div>
            <div style={{ fontFamily: "var(--font-body)", fontSize: 12, color: "#fff", letterSpacing: ".04em", textTransform: "uppercase", marginTop: 3 }}>Carne premium · pan artesanal</div>
          </div>
        </div>
      </div>

      <div style={{ display: "flex", gap: 10, margin: "26px 0 30px", flexWrap: "wrap" }}>
        {TABS.map(([id, l]) => {
          const on = tab === id;
          return (
            <button key={id} onClick={() => setTab(id)} style={{
              fontFamily: "var(--font-display)", fontSize: 15, textTransform: "uppercase", letterSpacing: ".03em",
              padding: "10px 22px", borderRadius: 999, cursor: "pointer", transition: "all .22s var(--ease-out)",
              border: on ? "2px solid var(--hp-yellow)" : "2px solid rgba(255,255,255,.22)",
              background: on ? "var(--hp-yellow)" : "transparent", color: on ? "#000" : "#fff",
              boxShadow: on ? "0 0 22px rgba(255,212,0,.5)" : "none", transform: on ? "translateY(-1px)" : "none" }}>{l}</button>
          );
        })}
      </div>

      <div key={tab} className="hp-tabpane">
        {tab === "hotdogs" && (
          <div style={gridPhoto}>{window.HP.perrotes.map((p, i) => <PhotoCard key={p.id} p={p} i={i} />)}</div>
        )}
        {tab === "especiales" && (
          <div style={gridPhoto}>{window.HP.especiales.map((p, i) => <PhotoCard key={p.id} p={p} i={i} />)}</div>
        )}
        {tab === "entradas" && (
          <div style={gridPhoto}>{[...window.HP.entradas, ...window.HP.nachotes].map((p, i) => <PhotoCard key={p.id} p={p} i={i} />)}</div>
        )}
        {tab === "combos" && (
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill,minmax(270px,1fr))", gap: 24 }}>
            {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 === "postres" && (
          <div style={gridPhoto}>{window.HP.postres.map((p, i) => <PhotoCard key={p.id} p={p} i={i} />)}</div>
        )}
        {tab === "bebidas" && (
          <div>
            <div style={gridText}>{window.HP.bebidas.map((b, i) => <TextCard key={i} b={b} i={i} />)}</div>
            <div style={{ marginTop: 24, background: "#0e0e0e", border: "1px solid var(--hp-red)", borderRadius: "var(--radius-md)",
              padding: "20px 24px", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, flexWrap: "wrap" }}>
              <div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 20, color: "#fff", textTransform: "uppercase" }}>¿Sed de algo más fuerte?</div>
                <div style={{ fontFamily: "var(--font-body)", fontSize: 14, color: "var(--hp-gray)", marginTop: 4 }}>
                  Cócteles, micheladas, copas y vinos — toda la barra en la carta completa.
                </div>
              </div>
              <Button variant="primary" onClick={() => go && go("Menú")}>Ver coctelería →</Button>
            </div>
          </div>
        )}
      </div>

      {tab === "hotdogs" && (
        <div style={{ marginTop: 34, background: "#0e0e0e", border: "1px solid rgba(255,255,255,.1)", borderRadius: 18,
          padding: "22px 26px", display: "flex", alignItems: "center", gap: 26, flexWrap: "wrap" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <FlameAccent size={28} color="var(--hp-red)" />
            <div>
              <h4 style={{ fontFamily: "var(--font-display)", fontSize: 20, color: "#fff", textTransform: "uppercase", margin: 0, lineHeight: 1 }}>Agrega más a tu perrote</h4>
              <span style={{ fontFamily: "var(--font-body)", fontSize: 12, color: "var(--hp-red)", fontWeight: 700, textTransform: "uppercase", letterSpacing: ".05em" }}>¡Tú lo haces único!</span>
            </div>
          </div>
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap", flex: 1 }}>
            {window.HP.toppings.map((t, i) => (
              <span key={i} style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "#fff", padding: "7px 13px",
                borderRadius: 999, border: "1px solid rgba(255,255,255,.15)", background: "rgba(255,255,255,.03)",
                display: "inline-flex", alignItems: "center", gap: 6 }}>
                <span style={{ fontSize: 16 }}>{t.icon}</span>{t.name} <b style={{ color: "var(--hp-yellow)" }}>{t.price}</b>
              </span>
            ))}
          </div>
        </div>
      )}

      <div style={{ marginTop: 34, textAlign: "center" }}>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 26, textTransform: "uppercase", color: "#fff", letterSpacing: ".02em" }}>
          Vemos deporte, <span style={{ color: "var(--hp-yellow)", textShadow: "var(--glow-yellow)", whiteSpace: "nowrap" }}>comemos <Perrote />.</span>
        </div>
        <div style={{ fontFamily: "var(--font-body)", fontSize: 13, letterSpacing: ".14em", color: "var(--hp-red)", fontWeight: 800, marginTop: 8 }}>#MÁSPERROTEQUENUNCA</div>
        <div style={{ marginTop: 22 }}><Button variant="primary" size="lg" onClick={() => go && go("Menú")}>Ver menú completo</Button></div>
        <div style={{ marginTop: 26, fontFamily: "var(--font-body)", fontSize: 11.5, color: "var(--hp-gray)", opacity: .75 }}>* Aviso legal: todas las imágenes son representativas.</div>
      </div>
    </section>
  );
}

function Experiencia() {
  const cols = [
    { icon: "sun", tone: "var(--hp-yellow)", tag: "De día", title: "Sports Bar",
      pts: ["Pantallas gigantes con NFL, MLB y Liga MX", "Ambiente familiar y pet friendly"], slot: "exp-dia", img: "../../assets/ambiance/exp-dia.webp", ph: "Foto ambiente día" },
    { icon: "moon", tone: "var(--hp-red)", tag: "De noche", title: "Perreo",
      pts: ["Música y el mejor ambiente", "Coctelería y los mejores drinks", "Fiesta hasta la madrugada"], slot: "exp-noche", img: "../../assets/ambiance/exp-noche.webp", ph: "Foto ambiente noche" },
  ];
  return (
    <section data-screen-label="Experiencia" style={{ padding: "72px 6vw", maxWidth: 1200, margin: "0 auto" }}>
      <NeonHeading color="white" size="display" as="h2" style={{ textAlign: "center", marginBottom: 6 }}>La experiencia</NeonHeading>
      <p style={{ textAlign: "center", fontFamily: "var(--font-body)", fontSize: 17, color: "var(--hp-gray)", margin: "0 auto 40px", maxWidth: 560 }}>
        El mismo lugar, dos energías. Vemos deporte y luego lo celebramos.
      </p>
      <div className="hp-exp-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
        {cols.map((c) => (
          <div key={c.title} style={{ borderRadius: "var(--radius-lg)", overflow: "hidden", border: `1px solid ${c.tone}` }}>
            <image-slot id={c.slot} src={c.img} style={{ width: "100%", height: 220, display: "block" }} shape="rect" placeholder={c.ph}></image-slot>
            <div style={{ padding: 24, background: "rgba(12,12,12,.7)" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8, color: c.tone }}>
                <Icon name={c.icon} size={18} color={c.tone} glow />
                <span style={{ fontFamily: "var(--font-body)", fontWeight: 700, textTransform: "uppercase", letterSpacing: ".06em", fontSize: 13 }}>{c.tag}</span>
              </div>
              <h3 style={{ fontFamily: "var(--font-display)", fontSize: 30, color: "#fff", textTransform: "uppercase", margin: "4px 0 14px" }}>{c.title}</h3>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
                {c.pts.map((p, i) => (
                  <li key={i} style={{ fontFamily: "var(--font-body)", fontSize: 15, color: "#fff", opacity: .9, display: "flex", gap: 8, alignItems: "center" }}>
                    <Icon name="check" size={16} color={c.tone} />{p}
                  </li>
                ))}
              </ul>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Sucursales() {
  const heroRef = React.useRef(null);
  const heroLayerRef = React.useRef(null);
  const activeRef = React.useRef(null);

  // parallax sutil en el hero (misma técnica que la salchicha de "Crea tu Perrote")
  React.useEffect(() => {
    if (!window.gsap || !window.ScrollTrigger) return;
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    const gsap = window.gsap;
    gsap.registerPlugin(window.ScrollTrigger);
    const ctx = gsap.context(() => {
      const travel = window.matchMedia("(max-width: 760px)").matches ? 26 : 55;
      window.ScrollTrigger.create({
        trigger: heroRef.current,
        start: "top bottom",
        end: "bottom top",
        scrub: 0.4,
        onUpdate: (self) => { gsap.set(heroLayerRef.current, { y: (self.progress - 0.5) * travel }); },
      });
    }, heroRef.current);
    return () => ctx.revert();
  }, []);

  const mapUrl = "https://www.google.com/maps/search/?api=1&query=Estadio+Alfredo+Harp+Helu";
  const mystery = [1, 2, 3, 4];

  return (
    <section data-screen-label="Sucursales" style={{ padding: "0 0 72px" }}>

      {/* 1. Hero principal — food truck invadiendo el estadio, ancho completo con parallax */}
      <div ref={heroRef} className="hp-suc-hero" style={{ position: "relative", width: "100vw", marginLeft: "calc(50% - 50vw)", height: "min(78vh, 680px)", minHeight: 460, overflow: "hidden", background: "#0e0e0e" }}>
        <div ref={heroLayerRef} style={{ position: "absolute", inset: "-6% 0", width: "100%", height: "112%", willChange: "transform" }}>
          <img src="../../assets/sucursal/hero-foodtruck-estadio.webp?v=2" alt="Food truck Hot Perrote en el estadio" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
        </div>
        <div aria-hidden="true" style={{ position: "absolute", inset: 0, background: "linear-gradient(90deg, rgba(6,6,6,.94) 0%, rgba(6,6,6,.62) 34%, rgba(6,6,6,.15) 62%, transparent 100%), linear-gradient(180deg, rgba(0,0,0,.25) 0%, transparent 26%, rgba(0,0,0,.5) 100%)" }} />

        <div className="hp-suc-hero-content" style={{ position: "relative", zIndex: 2, height: "100%", display: "flex", alignItems: "center", padding: "0 6vw" }}>
          <div style={{ maxWidth: 620 }}>
            <div style={{ fontFamily: "var(--font-display)", color: "var(--hp-yellow)", fontSize: 15, letterSpacing: ".2em", textTransform: "uppercase", marginBottom: 10 }}>Sucursales</div>
            <NeonHeading color="white" size="hero" as="h1" style={{ margin: 0, lineHeight: .98 }}>
              <span style={{ color: "var(--hp-yellow)", textShadow: "var(--glow-yellow)" }}>Sabor</span><br />
              <span style={{ whiteSpace: "nowrap" }}>que conquista</span><br />
              <span style={{ color: "var(--hp-red)", textShadow: "var(--glow-red)" }}>estadios</span>
            </NeonHeading>
            <p style={{ fontFamily: "var(--font-body)", fontSize: 18, lineHeight: 1.5, color: "#fff", opacity: .92, margin: "20px 0 28px", maxWidth: 460 }}>
              Ya estamos donde ruge la afición: en <b style={{ color: "var(--hp-yellow)" }}>casa de los Diablos Rojos de México</b>.
            </p>
            <Button variant="primary" size="lg" onClick={() => (window.location.href = "./sucursales.html")}>Ver sucursales →</Button>
          </div>
        </div>
      </div>

      <div style={{ maxWidth: 1200, margin: "0 auto", padding: "0 6vw" }}>

        {/* 2. Sucursal activa — Estadio Alfredo Harp Helú */}
        <div ref={activeRef} className="hp-suc-card" style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 0, marginTop: 44, borderRadius: "var(--radius-lg)", overflow: "hidden", border: "1px solid var(--hp-red)", boxShadow: "0 0 32px rgba(255,49,49,.18)", background: "#0e0e0e" }}>
          <div className="hp-suc-card-photo" style={{ position: "relative", minHeight: 320 }}>
            <img src="../../assets/sucursal/estadio-1.webp" alt="Estadio Alfredo Harp Helú" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
            <div aria-hidden="true" style={{ position: "absolute", inset: 0, background: "linear-gradient(0deg, rgba(0,0,0,.15) 0%, transparent 40%)" }} />
          </div>
          <div style={{ padding: "34px 32px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 8, alignSelf: "flex-start", background: "var(--hp-red)", color: "#fff",
              fontFamily: "var(--font-body)", fontWeight: 800, fontSize: 11, textTransform: "uppercase", letterSpacing: ".05em", padding: "6px 13px", borderRadius: 999, marginBottom: 14 }}>
              <span className="hp-pulse" style={{ width: 8, height: 8, borderRadius: "50%", background: "#fff" }} />Abierto ahora
            </span>
            <h3 style={{ fontFamily: "var(--font-display)", fontSize: 30, color: "#fff", textTransform: "uppercase", margin: "0 0 6px", lineHeight: 1.05 }}>Estadio Alfredo Harp Helú</h3>
            <div style={{ fontFamily: "var(--font-body)", fontSize: 13, fontWeight: 800, letterSpacing: ".04em", textTransform: "uppercase", color: "var(--hp-red)", marginBottom: 14 }}>Casa de los Diablos Rojos de México</div>
            <p style={{ fontFamily: "var(--font-body)", fontSize: 14.5, color: "var(--hp-gray)", lineHeight: 1.55, margin: 0, display: "flex", gap: 8 }}>
              <Icon name="pin" size={16} color="var(--hp-red)" />
              <span>Av. Viaducto Río de la Piedad, dentro de la Ciudad Deportiva Magdalena Mixiuhca (Puerta 8), Col. Granjas México, Alcaldía Iztacalco, CDMX · C.P. 08400.</span>
            </p>
            <div style={{ marginTop: 20 }}>
              <a href={mapUrl} target="_blank" rel="noopener noreferrer" style={{ display: "inline-block", background: "var(--hp-yellow)", color: "#000",
                fontFamily: "var(--font-display)", fontSize: 14, padding: "12px 22px", borderRadius: 999, textDecoration: "none", letterSpacing: ".03em" }}>Ver ubicación →</a>
            </div>
          </div>
        </div>

        {/* 3. Próxima apertura — Guadalajara (restaurante, no estadio) */}
        <div className="hp-suc-card hp-suc-gdl" style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 0, marginTop: 24, borderRadius: "var(--radius-lg)", overflow: "hidden", border: "1px solid var(--hp-yellow)", boxShadow: "0 0 32px rgba(255,212,0,.12)", background: "#0e0e0e" }}>
          <div style={{ padding: "34px 32px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
            <span style={{ display: "inline-block", alignSelf: "flex-start", background: "var(--hp-yellow)", color: "#000",
              fontFamily: "var(--font-body)", fontWeight: 800, fontSize: 11, textTransform: "uppercase", letterSpacing: ".05em", padding: "6px 13px", borderRadius: 999, marginBottom: 14 }}>
              Próxima apertura
            </span>
            <h3 style={{ fontFamily: "var(--font-display)", fontSize: 32, color: "#fff", textTransform: "uppercase", margin: "0 0 4px", lineHeight: 1 }}>Guadalajara</h3>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 17, color: "var(--hp-red)", textTransform: "uppercase", marginBottom: 14 }}>Colonia Americana</div>
            <p style={{ fontFamily: "var(--font-body)", fontSize: 14.5, color: "var(--hp-gray)", lineHeight: 1.55, margin: "0 0 18px" }}>
              Nuestro primer spot fuera del estadio. Hot Perrote llega a una de las zonas con más vida, comida y ambiente de Guadalajara.
            </p>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 7, alignSelf: "flex-start", fontFamily: "var(--font-body)", fontSize: 11, fontWeight: 800, letterSpacing: ".06em", textTransform: "uppercase", color: "#fff", border: "1px solid var(--color-border)", borderRadius: 999, padding: "6px 13px" }}>
              <span className="hp-pulse" style={{ width: 7, height: 7, borderRadius: "50%", background: "var(--hp-red)" }} />Próximamente · Restaurante
            </span>
          </div>
          <div className="hp-suc-card-photo" style={{ position: "relative", minHeight: 280 }}>
            <img src="../../assets/sucursal/gdl-letrero.webp" alt="Próximamente Guadalajara — Hot Perrote" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 65%" }} />
          </div>
        </div>

        <p style={{ textAlign: "center", fontFamily: "var(--font-body)", fontWeight: 700, fontSize: 14, color: "var(--hp-yellow)", margin: "26px 0 0" }}>
          <FlameAccent size={14} color="var(--hp-red)" glow={false} style={{ verticalAlign: "-2px", marginRight: 6 }} />
          De los estadios a la ciudad: la manada sigue creciendo.
        </p>

        {/* 4. Próximamente en más estadios — sin sedes confirmadas todavía */}
        <div style={{ marginTop: 56 }}>
          <div style={{ textAlign: "center", fontFamily: "var(--font-body)", fontWeight: 800, fontSize: 12, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--hp-red)", marginBottom: 6 }}>Próximamente en más estadios</div>
          <NeonHeading color="white" size="display" as="h2" style={{ textAlign: "center", marginBottom: 30 }}>Próximas aperturas <span style={{ color: "var(--hp-red)", textShadow: "var(--glow-red)" }}>en más estadios</span></NeonHeading>
          <div className="hp-suc-mystery" style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 16 }}>
            {mystery.map((n) => (
              <div key={n} style={{ position: "relative", borderRadius: "var(--radius-md)", overflow: "hidden", border: "1px dashed var(--color-border)", aspectRatio: "4 / 5", background: "#0e0e0e" }}>
                <img src="../../assets/sucursal/mystery-stadium.webp?v=2" alt="" aria-hidden="true" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
                <div aria-hidden="true" style={{ position: "absolute", inset: 0, background: "linear-gradient(0deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,.55) 100%)" }} />
                <div style={{ position: "absolute", left: 0, right: 0, bottom: 0, padding: "16px 14px", textAlign: "center" }}>
                  <div style={{ fontFamily: "var(--font-display)", fontSize: 16, color: "#fff", textTransform: "uppercase", marginBottom: 6 }}>Próxima sede</div>
                  <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontFamily: "var(--font-body)", fontSize: 10.5, fontWeight: 800, letterSpacing: ".07em", textTransform: "uppercase", color: "var(--hp-yellow)" }}>
                    <span className="hp-pulse" style={{ width: 7, height: 7, borderRadius: "50%", background: "var(--hp-yellow)" }} />Muy pronto
                  </span>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div style={{ textAlign: "center", marginTop: 40 }}>
          <Button variant="ghost" size="lg" onClick={() => (window.location.href = "./sucursales.html")}>Ver todas las sucursales →</Button>
        </div>
      </div>
    </section>
  );
}

function CreaPerrote() {
  const B = "../../assets/build/";
  const trackRef = React.useRef(null);
  const sausageRef = React.useRef(null);
  const bunRef = React.useRef(null);
  const videoRef = React.useRef(null);

  const premium = [
    { i: "🥖", t: "Pan brioche", d: "Recién horneado, dorado y suave." },
    { i: "🌭", t: "Salchicha de 23 cm", d: "Tamaño XXL, carne premium." },
    { i: "⭐", t: "Ingredientes premium", d: "Selectos, frescos, de calidad." },
  ];
  const steps = [
    { n: 1, title: "Toppings", price: "+$50", band: "var(--hp-red)", bandFg: "#fff",
      tiles: [
        { img: B + "top-tocino.webp", label: "Tocino", price: "+$50" },
        { img: B + "top-alambre.webp", label: "Alambre", price: "+$50" },
        { img: B + "top-pepperoni.webp", label: "Pepperoni", price: "+$50" },
        { img: B + "top-canada.webp", label: "Canadá Bacon", price: "+$50" },
      ] },
    { n: 2, title: "Dale tu toque", price: "+$20", band: "#f2f2f2", bandFg: "#151515",
      tiles: [
        { img: B + "ad-jalapeno.webp", label: "Jalapeños", price: "+$20" },
        { img: B + "ad-pepinillo.webp", label: "Pepinillo dulce", price: "+$20" },
        { img: B + "ad-cebolla.webp", label: "Cebolla caramelizada", price: "+$20" },
        { img: B + "ad-cheddar.webp", label: "Queso cheddar", price: "+$20" },
        { img: B + "ad-guacamole.webp", label: "Guacamole", price: "+$40" },
      ] },
    { n: 3, title: "Chorrea tu perrote", price: "", band: "var(--hp-yellow)", bandFg: "#151515",
      tiles: [
        { basic: true, img: B + "sa-basicas.webp", label: "Ketchup · Mayonesa", label2: "Mostaza · Salsa BBQ", price: "Gratis" },
        { img: B + "sa-mayotrufa.webp", label: "Mayonesa trufada", price: "+$20" },
        { img: B + "sa-chipotle.webp", label: "Salsa chipotle", price: "+$20" },
        { img: B + "sa-mielmostaza.webp", label: "Miel y mostaza", price: "+$20" },
      ] },
  ];

  // La salchicha flota y desciende al ritmo del scroll, por detrás de las tarjetas (z-index),
  // hasta "caer" en el pan y disparar el video de armado. Progressive enhancement: sin GSAP
  // o con "reduce motion" la sección se ve igual de completa, solo sin el movimiento.
  React.useEffect(() => {
    if (!window.gsap || !window.ScrollTrigger) return;
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    const gsap = window.gsap;
    gsap.registerPlugin(window.ScrollTrigger);

    const ctx = gsap.context(() => {
      trackRef.current.classList.add("hp-crea-live");
      const REST = 0.1; // se queda quieta, acostada arriba de "Toppings", hasta que el usuario avanza el scroll
      const updateSausage = (self) => {
        const el = sausageRef.current;
        if (!el) return;
        const travel = trackRef.current.offsetHeight - el.offsetHeight * 0.6;
        const raw = self.progress;
        const q = raw <= REST ? 0 : (raw - REST) / (1 - REST);
        const fadeOut = 1 - Math.max(0, (raw - 0.92) / 0.08);
        gsap.set(el, { y: q * travel, rotate: -2 + q * 4, opacity: fadeOut });
      };
      const st = window.ScrollTrigger.create({
        trigger: trackRef.current,
        start: "top 70%",
        end: "bottom 60%",
        scrub: 0.55,
        onUpdate: updateSausage,
        onRefresh: updateSausage,
      });
      updateSausage(st);
      window.ScrollTrigger.create({
        trigger: bunRef.current,
        start: "top 75%",
        onEnter: () => { bunRef.current.classList.add("hp-crea-bun-active"); const v = videoRef.current; if (v) { try { v.currentTime = 0; } catch (e) {} v.play().catch(() => {}); } },
        onEnterBack: () => { bunRef.current.classList.add("hp-crea-bun-active"); const v = videoRef.current; if (v) { try { v.currentTime = 0; } catch (e) {} v.play().catch(() => {}); } },
        onLeaveBack: () => bunRef.current.classList.remove("hp-crea-bun-active"),
      });
    }, trackRef.current);

    return () => ctx.revert();
  }, []);

  const Arrow = () => (
    <div style={{ textAlign: "center", margin: "20px 0", lineHeight: 1, position: "relative", zIndex: 2 }}>
      <span style={{ fontSize: 26, color: "var(--hp-red)", filter: "drop-shadow(0 0 8px rgba(255,49,49,.7))" }}>▼</span>
    </div>
  );

  const Tile = ({ t }) => (
    <div className="hp-card" style={{ position: "relative", borderRadius: 16, overflow: "hidden",
      border: "1px solid rgba(255,255,255,.1)", background: "#0e0e0e", aspectRatio: "1 / 1" }}>
      {t.img
        ? <React.Fragment>
            <img src={t.img} alt={t.label} loading="lazy" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
            <div style={{ position: "absolute", inset: 0, background: t.basic
              ? "linear-gradient(180deg,transparent 34%,rgba(0,0,0,.92) 68%)"
              : "linear-gradient(180deg,transparent 42%,rgba(0,0,0,.86))" }} />
          </React.Fragment>
        : <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center", padding: 14,
            background: "radial-gradient(circle at 50% 38%, rgba(255,212,0,.16), #0e0e0e 72%)" }}>
            <FlameAccent size={40} color="var(--hp-yellow)" glow />
          </div>}
      <div style={{ position: "absolute", left: 0, right: 0, bottom: 0, padding: t.basic ? "8px 10px" : "10px 12px" }}>
        <div style={{ fontFamily: "var(--font-display)", fontSize: t.basic ? 12 : 14.5, color: "#fff", textTransform: "uppercase", lineHeight: 1.25 }}>
          {t.label}{t.label2 && <React.Fragment><br />{t.label2}</React.Fragment>}
        </div>
        {t.price && <div style={{ fontFamily: "var(--font-display)", fontSize: t.basic ? 13 : 14, marginTop: 2, color: t.price === "Gratis" ? "#3fd07f" : "var(--hp-yellow)" }}>{t.price}</div>}
      </div>
    </div>
  );

  return (
    <section data-screen-label="Crea tu perrote" style={{ padding: "72px 6vw", maxWidth: 1120, margin: "0 auto" }}>
      <NeonHeading color="yellow" size="display" as="h2" style={{ textAlign: "center" }}>
        Crea tu propio <Perrote />
      </NeonHeading>
      <p style={{ textAlign: "center", fontFamily: "var(--font-body)", fontSize: 18, color: "var(--hp-gray)", margin: "8px auto 28px", maxWidth: 620 }}>
        Perrote base desde $130. Tres pasos, mil combinaciones — tú lo haces único.
      </p>

      {/* franja premium */}
      <div className="hp-crea-premium" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 16, marginBottom: 24 }}>
        {premium.map((p) => (
          <div key={p.t} style={{ display: "flex", alignItems: "center", gap: 14, background: "#0e0e0e",
            border: "1px solid var(--hp-yellow)", borderRadius: "var(--radius-md)", padding: "16px 20px" }}>
            <div style={{ fontSize: 30 }}>{p.i}</div>
            <div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 18, color: "var(--hp-yellow)", textTransform: "uppercase", lineHeight: 1 }}>{p.t}</div>
              <div style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "#fff", opacity: .8, marginTop: 4 }}>{p.d}</div>
            </div>
          </div>
        ))}
      </div>

      <div style={{ textAlign: "center", fontFamily: "var(--font-display)", fontSize: 15, color: "#fff", textTransform: "uppercase", letterSpacing: ".08em", margin: "4px 0 6px", opacity: .8 }}>
        Empieza con la salchicha de 23 cm — baja y arma tu perrote
      </div>

      {/* pista: la salchicha flotante recorre esta zona por detrás de las tarjetas */}
      <div ref={trackRef} className="hp-crea-track">
        <div className="hp-crea-sausage-wrap" aria-hidden="true">
          <img ref={sausageRef} className="hp-crea-sausage-float" src={B + "salchicha-video-cutout.webp"} alt="" />
        </div>
        <span className="hp-smoke-puff" style={{ animationDelay: "0s" }} aria-hidden="true" />
        <span className="hp-smoke-puff" style={{ animationDelay: "1.1s", left: "54%" }} aria-hidden="true" />
        <span className="hp-smoke-puff" style={{ animationDelay: "2.2s", left: "46%" }} aria-hidden="true" />

        {steps.map((s) => (
          <div key={s.n} className="hp-crea-step">
            <Arrow />
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 16, position: "relative", zIndex: 2 }}>
              <div style={{ width: 40, height: 40, flexShrink: 0, borderRadius: "50%", background: "#000",
                border: "3px solid " + s.band, color: "#fff", display: "grid", placeItems: "center",
                fontFamily: "var(--font-display)", fontSize: 19 }}>{s.n}</div>
              <div style={{ flex: 1, background: s.band, color: s.bandFg, borderRadius: 12, padding: "11px 20px",
                display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12 }}>
                <span style={{ fontFamily: "var(--font-display)", fontSize: 21, textTransform: "uppercase", letterSpacing: ".01em" }}>{s.title}</span>
                {s.price && <span style={{ fontFamily: "var(--font-display)", fontSize: 19, color: s.band === "var(--hp-red)" ? "var(--hp-yellow)" : "var(--hp-red)" }}>{s.price}</span>}
              </div>
            </div>
            <div className="hp-crea-tiles" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,150px)", justifyContent: "center", gap: 14, position: "relative", zIndex: 2 }}>
              {s.tiles.map((t, k) => <Tile key={k} t={t} />)}
            </div>
          </div>
        ))}

        {/* la salchicha "cae" aquí: pan + video de armado, a todo lo ancho de la pantalla */}
        <Arrow />
        <div ref={bunRef} className="hp-crea-bun">
          <video ref={videoRef} className="hp-crea-video" muted playsInline preload="metadata"
            poster={B + "perrote-final.webp"} src={B + "crea-perrote.mp4"} />
          <div className="hp-crea-bun-shade" aria-hidden="true" />
          <div className="hp-crea-bun-caption">
            <div style={{ fontFamily: "var(--font-display)", fontSize: "clamp(26px,3.4vw,40px)", color: "#fff", textTransform: "uppercase", lineHeight: 1 }}>
              ¡Y así nace tu <span style={{ color: "var(--hp-yellow)", textShadow: "var(--glow-yellow)" }}><Perrote /></span>!
            </div>
          </div>
        </div>
      </div>

      <div style={{ display: "flex", justifyContent: "center", alignItems: "center", gap: 10, marginTop: 26, flexWrap: "wrap" }}>
        <span style={{ fontFamily: "var(--font-display)", fontSize: 13, color: "#000", background: "var(--hp-yellow)", padding: "5px 10px", borderRadius: 6, letterSpacing: ".04em" }}>GLUTEN FREE</span>
        <span style={{ fontFamily: "var(--font-body)", fontSize: 14, color: "var(--hp-yellow)", fontWeight: 600 }}>Pide la opción sin gluten de todos los perrotes.</span>
      </div>
    </section>
  );
}

Object.assign(window, { HPMid: { Menu, CreaPerrote, Experiencia, Sucursales } });