// Hot Perrote — página Sucursales completa (expansión de marca: México + Madrid).
const { NavBar, NeonHeading, Button, Icon, FlameAccent } = window.HotPerroteDesignSystem_2cf767;
const NAV = ["Inicio", "Nosotros", "Menú", "Sucursales", "Club Hot Perrote", "Franquicias", "Contacto"];

function Pin({ color = "var(--hp-red)", size = 22 }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill={color} aria-hidden="true" style={{ filter: `drop-shadow(0 0 7px ${color})`, display: "block" }}>
      <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z" />
    </svg>
  );
}

// íconos propios (sin emojis) — aceptan color para reusarse tanto en la franja amarilla (negro) como en tarjetas oscuras (amarillo/rojo)
function IconGate({ size = 30, color = "#000" }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke={color} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M3 21V9.5a1 1 0 0 1 .55-.9l8-4a1 1 0 0 1 .9 0l8 4a1 1 0 0 1 .55.9V21" />
      <path d="M2 21h20" />
      <path d="M8 21v-6a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6" />
      <path d="M9 10.5v4M15 10.5v4" />
      <circle cx="12" cy="12.5" r=".9" fill={color} stroke="none" />
    </svg>
  );
}
function IconBoltSolid({ size = 30, color = "#000" }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} aria-hidden="true">
      <path d="M12.7 2 4 13.5h6.2L10 22l9-12.5h-6.3L12.7 2z" fill={color} stroke={color} strokeWidth="0.6" strokeLinejoin="round" />
    </svg>
  );
}
function IconHotdog({ size = 30, color = "#000" }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} aria-hidden="true">
      <path d="M4 14.5c0-3.6 2.7-6.2 6.2-6.2h3.6c3.5 0 6.2 2.6 6.2 6.2 0 3.3-2.5 5.8-5.8 5.8H9.8C6.5 20.3 4 17.8 4 14.5z" fill="none" stroke={color} strokeWidth="1.6" />
      <ellipse cx="12" cy="13.2" rx="7.4" ry="3.4" fill={color} />
      <path d="M6.3 12c1.2.9 1.2 2.4 0 3.3M11.6 12c1.2.9 1.2 2.4 0 3.3M16.9 12c1.2.9 1.2 2.4 0 3.3" stroke="#fff" strokeWidth="1.1" fill="none" strokeLinecap="round" />
    </svg>
  );
}
function IconBaseball({ size = 30, color = "#000" }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke={color} aria-hidden="true">
      <circle cx="12" cy="12" r="9.3" strokeWidth="1.7" />
      <path d="M6.7 4.2c1.9 2.4 1.9 13.2 0 15.6M17.3 4.2c-1.9 2.4-1.9 13.2 0 15.6" strokeWidth="1.3" />
      <path d="M6.3 6.5l1.6.9M6.3 17.5l1.6-.9M17.7 6.5l-1.6.9M17.7 17.5l-1.6-.9M7 11l1.7.2M7 13l1.7-.2M17 11l-1.7.2M17 13l-1.7-.2" strokeWidth="1" strokeLinecap="round" />
    </svg>
  );
}
function IconClock({ size = 20, color = "var(--hp-red)" }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <circle cx="12" cy="12" r="9.5" />
      <path d="M12 7v5l3.5 2" />
    </svg>
  );
}
function IconPause({ size = 20, color = "var(--hp-yellow)" }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round" aria-hidden="true">
      <circle cx="12" cy="12" r="9.5" />
      <path d="M10 8.5v7M14 8.5v7" />
    </svg>
  );
}

const estadioFotos = [
  { src: "../../assets/sucursal/estadio-1.webp", alt: "Estadio Alfredo Harp Helú al atardecer" },
  { src: "../../assets/sucursal/foodtruck.webp", alt: "Food truck Hot Perrote en Puerta A7 del estadio" },
  { src: "../../assets/sucursal/estadio-2.webp", alt: "Ambiente de juego en el Estadio Alfredo Harp Helú" },
  { src: "../../assets/sucursal/harp.webp", alt: "Vista aérea del Estadio Alfredo Harp Helú" },
];

const infoStrip = [
  { Icon: IconGate, t: "Puerta A7", d: "Encuéntranos en Puerta A7" },
  { Icon: IconBoltSolid, t: "Servicio express", d: "Rápido, eficiente y sin complicarte el juego" },
  { Icon: IconHotdog, t: "Hot dogs gourmet", d: "Ingredientes premium y combinaciones con mucho sabor" },
  { Icon: IconBaseball, t: "Ambiente beisbolero", d: "La energía del estadio en cada mordida" },
];

const viajero = [
  { photo: "../../assets/mascot/viajero-diablos.webp?v=2", tag: "MÉXICO / DIABLOS", place: "Estadio Alfredo Harp Helú" },
  { photo: "../../assets/mascot/viajero-bernabeu.webp?v=4", tag: "MADRID / BERNABÉU", place: "Santiago Bernabéu Stadium" },
  { photo: "../../assets/mascot/viajero-wizink.webp", tag: "MADRID / WIZINK", place: "WiZink Center" },
  { photo: "../../assets/mascot/viajero-metropolitano.webp", tag: "MADRID / METROPOLITANO", place: "Wanda Metropolitano" },
];

const mystery = [1, 2, 3, 4];

const madrid = [
  { name: "Santiago Bernabéu", photo: "../../assets/sucursal/madrid/bernabeu.webp",
    desc: "A unos pasos del Santiago Bernabéu, ideal para la previa futbolera y hot dogs gourmet antes del partido.",
    link: "https://hotperrote.com/ubicaciones/bernabeu/" },
  { name: "Goya Wizink", photo: "../../assets/sucursal/madrid/wizink.webp",
    desc: "El spot perfecto para comer antes o después de conciertos, eventos y noches en Wizink Center.",
    link: "https://hotperrote.com/ubicaciones/wizink/" },
  { name: "Estadio Wanda Metropolitano", photo: "../../assets/sucursal/madrid/wanda.webp",
    desc: "Food truck con ambiente de estadio, ideal para días de partido, conciertos y eventos.",
    link: "https://hotperrote.com/ubicaciones/wanda/" },
  { name: "Plaza Castilla", photo: "../../assets/sucursal/madrid/plaza-castilla.webp",
    desc: "Una opción express en una zona estratégica de Madrid, perfecta para comer rápido, rico y abundante.",
    link: "https://hotperrote.com/ubicaciones/plaza-castilla/" },
  { name: "Tribunal", photo: "../../assets/sucursal/madrid/tribunal.webp",
    desc: "Street food en Madrid centro, cerca de zonas de ocio, planes con amigos y ambiente urbano.",
    link: "https://hotperrote.com/ubicaciones/tribunal/" },
];

function SucursalesApp() {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const [estadioIdx, setEstadioIdx] = React.useState(0);
  const navHidden = window.HPNavScroll() && !menuOpen;
  window.HPLogoHome();
  const activeRef = React.useRef(null);
  const ubicacionRef = React.useRef(null);
  const heroRef = React.useRef(null);
  const heroLayerRef = React.useRef(null);
  const railRef = React.useRef(null);

  // el carrusel de fotos del estadio avanza solo cada 4s
  React.useEffect(() => {
    const id = setInterval(() => setEstadioIdx((i) => (i + 1) % estadioFotos.length), 4000);
    return () => clearInterval(id);
  }, []);

  // parallax sutil en el hero (misma técnica que el resto del sitio)
  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 nav = (label) => {
    if (label === "Sucursales") { window.scrollTo({ top: 0, behavior: "smooth" }); return; }
    if (label === "Menú") { window.location.href = "/menu"; 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] || "");
  };
  const scrollTo = (ref) => ref.current && ref.current.scrollIntoView({ behavior: "smooth", block: "start" });
  const scrollRail = (dir) => { if (railRef.current) railRef.current.scrollBy({ left: dir * 320, behavior: "smooth" }); };

  return (
    <div style={{ position: "relative", minHeight: "100vh" }}>
      <div aria-hidden="true" style={{ position: "fixed", inset: 0, zIndex: 0, background: "#060606" }} />
      <div style={{ position: "relative", zIndex: 1 }}>
        <NavBar active="Sucursales" 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 === "Sucursales" ? "on" : ""} onClick={(e) => { e.preventDefault(); nav(l); setMenuOpen(false); }}>{l}</a>))}
        </div>

        {/* 1. HERO — mismo fondo que "Sabor que conquista estadios" */}
        <div ref={heroRef} className="hp-suc-hero" style={{ position: "relative", width: "100%", height: "min(74vh, 620px)", minHeight: 440, 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: 480 }}>
                De los estadios a la ciudad: la manada sigue creciendo. Hot Perrote lleva su pasión por los hot dogs gourmet a nuevos territorios.
              </p>
              <Button variant="primary" size="lg" onClick={() => scrollTo(activeRef)}>Explora sucursales →</Button>
            </div>
          </div>
        </div>

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

          {/* 2. SUCURSAL ABIERTA — Estadio Alfredo Harp Helú */}
          <div ref={activeRef} className="hp-suc-card" style={{ display: "grid", gridTemplateColumns: "1.15fr 1fr", gap: 0, marginTop: 48, 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: 340 }}>
              {estadioFotos.map((f, i) => (
                <img key={f.src} src={f.src} alt={f.alt} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover",
                  opacity: i === estadioIdx ? 1 : 0, transition: "opacity 1s ease" }} />
              ))}
              <div aria-hidden="true" style={{ position: "absolute", inset: 0, background: "linear-gradient(0deg, rgba(0,0,0,.15) 0%, transparent 40%)" }} />
              <div style={{ position: "absolute", left: 0, right: 0, bottom: 14, display: "flex", justifyContent: "center", gap: 7 }}>
                {estadioFotos.map((f, i) => (
                  <button key={f.src} aria-label={`Foto ${i + 1}`} onClick={() => setEstadioIdx(i)} style={{ width: i === estadioIdx ? 20 : 7, height: 7, borderRadius: 999,
                    background: i === estadioIdx ? "var(--hp-yellow)" : "rgba(255,255,255,.5)", border: "none", cursor: "pointer", padding: 0, transition: "all .3s ease" }} />
                ))}
              </div>
            </div>
            <div style={{ padding: "36px 34px", 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>
              <h2 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(26px,2.6vw,34px)", color: "#fff", textTransform: "uppercase", margin: "0 0 6px", lineHeight: 1.05 }}>Estadio Alfredo Harp Helú</h2>
              <div style={{ fontFamily: "var(--font-body)", fontSize: 13, fontWeight: 800, letterSpacing: ".04em", textTransform: "uppercase", color: "var(--hp-red)", marginBottom: 16 }}>Casa de los Diablos Rojos de México</div>
              <p style={{ fontFamily: "var(--font-body)", fontSize: 15, color: "#fff", opacity: .88, lineHeight: 1.6, margin: "0 0 12px" }}>
                Hot Perrote México ya está en el Estadio Alfredo Harp Helú, llevando el sabor más perrote al corazón del ambiente beisbolero. Aquí cada juego se vive con más sabor: hot dogs gourmet, servicio rápido y una experiencia pensada para que disfrutes sin perderte la acción.
              </p>
              <p style={{ fontFamily: "var(--font-body)", fontSize: 15, color: "var(--hp-gray)", lineHeight: 1.6, margin: "0 0 22px" }}>
                Nos encuentras dentro del estadio, en una zona pensada para los verdaderos fans que quieren comer rico, rápido y con toda la energía del partido.
              </p>
              <Button variant="primary" size="lg" onClick={() => scrollTo(ubicacionRef)}>Ver ubicación →</Button>
            </div>
          </div>

          {/* 3. FRANJA DE DATOS RÁPIDOS */}
          <div className="hp-suc-strip" style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 0, marginTop: 24, borderRadius: "var(--radius-lg)", overflow: "hidden", background: "var(--hp-yellow)" }}>
            {infoStrip.map((s, i) => (
              <div key={s.t} style={{ padding: "26px 18px", textAlign: "center", borderLeft: i > 0 ? "1.5px solid rgba(0,0,0,.18)" : "none" }}>
                <div style={{ height: 34, display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 10 }}><s.Icon size={30} /></div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 17.5, color: "#000", textTransform: "uppercase", lineHeight: 1.15 }}>{s.t}</div>
                <div style={{ fontFamily: "var(--font-body)", fontWeight: 700, fontSize: 14, color: "#111", marginTop: 6, lineHeight: 1.45 }}>{s.d}</div>
              </div>
            ))}
          </div>

          {/* 4. SECCIÓN PROFUNDA — dirección + mapa de Google Maps */}
          <div ref={ubicacionRef} style={{ marginTop: 60, borderRadius: "var(--radius-lg)", border: "1px solid var(--color-border)", background: "#0a0a0a", padding: "40px 6vw" }}>
            <div className="hp-suc-deep" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40, alignItems: "stretch" }}>
              <div>
                <div style={{ display: "flex", alignItems: "center", gap: 7, fontFamily: "var(--font-display)", color: "var(--hp-red)", fontSize: 13, letterSpacing: ".14em", textTransform: "uppercase", marginBottom: 10 }}>
                  <Pin size={14} />Ubicación dentro del estadio
                </div>
                <h3 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(28px,3vw,38px)", color: "#fff", textTransform: "uppercase", margin: "0 0 16px", lineHeight: 1.05 }}>
                  Donde el antojo<br /><span style={{ color: "var(--hp-yellow)", textShadow: "var(--glow-yellow)" }}>también juega</span>
                </h3>
                <p style={{ fontFamily: "var(--font-body)", fontSize: 15, color: "var(--hp-gray)", lineHeight: 1.65, margin: "0 0 20px" }}>
                  Hot Perrote está dentro del Estadio Alfredo Harp Helú, listo para acompañarte antes del primer lanzamiento, en la pausa o cuando el antojo apriete.
                </p>

                <div style={{ display: "flex", flexWrap: "wrap", gap: 10, marginBottom: 24 }}>
                  {[["Antes del partido", IconClock], ["En la pausa", IconPause], ["Post-juego", (p) => <Icon name="trophy" {...p} />]].map(([label, Ico]) => (
                    <span key={label} style={{ display: "inline-flex", alignItems: "center", gap: 7, border: "1px solid var(--hp-red)", borderRadius: 999, padding: "8px 14px", background: "rgba(255,49,49,.06)" }}>
                      <Ico size={16} />
                      <span style={{ fontFamily: "var(--font-body)", fontWeight: 700, fontSize: 13, color: "#fff" }}>{label}</span>
                    </span>
                  ))}
                </div>

                <div style={{ display: "flex", flexDirection: "column", gap: 12, marginBottom: 24 }}>
                  {[
                    [IconBoltSolid, "var(--hp-red)", "Servicio rápido para no perderte la acción"],
                    [IconHotdog, "var(--hp-yellow)", "Hot dogs gourmet con sabor premium"],
                    [IconBaseball, "#fff", "Ambiente beisbolero en cada mordida"],
                  ].map(([Ico, color, txt], i, arr) => (
                    <div key={txt} style={{ display: "flex", alignItems: "center", gap: 12, paddingBottom: 12, borderBottom: i < arr.length - 1 ? "1px solid var(--color-border)" : "none" }}>
                      <span style={{ width: 34, height: 34, flexShrink: 0, borderRadius: "50%", border: `1.5px solid ${color}`, display: "grid", placeItems: "center" }}><Ico size={16} color={color} /></span>
                      <span style={{ fontFamily: "var(--font-body)", fontSize: 14.5, color: "#fff" }}>{txt}</span>
                    </div>
                  ))}
                </div>

                <a href="https://www.google.com/maps/search/?api=1&query=Estadio+Alfredo+Harp+Helu" target="_blank" rel="noopener noreferrer"
                  style={{ display: "inline-flex", alignItems: "center", gap: 8, background: "var(--hp-yellow)", color: "#000",
                    fontFamily: "var(--font-display)", fontSize: 14, padding: "13px 22px", borderRadius: 999, textDecoration: "none", letterSpacing: ".02em" }}>
                  <Pin size={15} color="#000" />Ver ubicación en el mapa →
                </a>
              </div>

              {/* mapa incrustado de Google Maps */}
              <div style={{ position: "relative", borderRadius: "var(--radius-lg)", overflow: "hidden", border: "1px solid var(--color-border)", background: "#111", minHeight: 340 }}>
                <iframe
                  title="Ubicación Estadio Alfredo Harp Helú"
                  src="https://www.google.com/maps?q=Estadio+Alfredo+Harp+Helu,+Av.+Viaducto+Rio+de+la+Piedad,+Granjas+Mexico,+Iztacalco,+CDMX&output=embed"
                  loading="lazy"
                  referrerPolicy="no-referrer-when-downgrade"
                  allowFullScreen
                  style={{ position: "absolute", inset: 0, width: "100%", height: "100%", border: 0, filter: "grayscale(.2) contrast(1.05)" }} />
              </div>
            </div>
          </div>

          {/* 5. GUADALAJARA — próxima apertura */}
          <div className="hp-suc-card hp-suc-gdl" style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 0, marginTop: 70, 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 llega a una de las zonas con más vida, comida y ambiente de Guadalajara. Hot Perrote aterriza en la Colonia Americana para llevar su experiencia gourmet a la ciudad.
              </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>

          {/* 6. PRÓXIMAMENTE EN MÁS ESTADIOS */}
          <div style={{ marginTop: 70 }}>
            <div style={{ textAlign: "center", fontFamily: "var(--font-body)", fontWeight: 800, fontSize: 12, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--hp-red)", marginBottom: 6 }}>La manada sigue creciendo</div>
            <NeonHeading color="white" size="display" as="h2" style={{ textAlign: "center", marginBottom: 10 }}>Próximamente abriremos <span style={{ color: "var(--hp-red)", textShadow: "var(--glow-red)" }}>en más estadios</span></NeonHeading>
            <p style={{ textAlign: "center", fontFamily: "var(--font-body)", fontSize: 15, color: "var(--hp-gray)", margin: "0 auto 30px", maxWidth: 560 }}>
              De los estadios a más estadios: Hot Perrote sigue conquistando nuevas sedes.
            </p>
            <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)" }} />Próximamente
                    </span>
                  </div>
                </div>
              ))}
            </div>
          </div>

        </div>

        {/* 7. TAMBIÉN ESTAMOS EN MADRID — franja blanca a todo lo ancho, diferenciada de México */}
        <div className="hp-suc-madrid-band" style={{ width: "100vw", marginLeft: "calc(50% - 50vw)", marginTop: 70, background: "#fff", padding: "64px 6vw" }}>
          <div style={{ maxWidth: 1200, margin: "0 auto" }}>
            <div style={{ textAlign: "center", fontFamily: "var(--font-body)", fontWeight: 800, fontSize: 12, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--hp-red)", marginBottom: 6 }}>Presencia internacional</div>
            <h2 style={{ textAlign: "center", fontFamily: "var(--font-display)", fontSize: "clamp(28px,3.4vw,42px)", color: "#111", textTransform: "uppercase", margin: "0 0 10px", lineHeight: 1.05 }}>
              También estamos en <span style={{ color: "var(--hp-red)" }}>Madrid</span>
            </h2>
            <p style={{ textAlign: "center", fontFamily: "var(--font-body)", fontSize: 15, color: "#444", margin: "0 auto 8px", maxWidth: 640 }}>
              Hot Perrote nació en España y hoy forma parte de puntos clave de Madrid: estadios, conciertos, zonas urbanas y spots de alta afluencia.
            </p>
            <p style={{ textAlign: "center", fontFamily: "var(--font-body)", fontSize: 14.5, color: "#666", margin: "0 auto 34px", maxWidth: 680, lineHeight: 1.6 }}>
              Antes de llegar a México, Hot Perrote conquistó Madrid con una propuesta de hot dogs gourmet, servicio rápido y una personalidad imposible de ignorar. Desde la previa del Bernabéu hasta el ambiente de conciertos en Wizink, cada sede demuestra que Hot Perrote no es solo comida rápida: es una experiencia de marca.
            </p>
            <div className="hp-suc-madrid" style={{ display: "grid", gridTemplateColumns: "repeat(5,1fr)", gap: 14 }}>
              {madrid.map((m) => (
                <div key={m.name} className="hp-card" style={{ borderRadius: "var(--radius-lg)", overflow: "hidden", border: "1px solid #e6e6e6", background: "#fafafa", display: "flex", flexDirection: "column", boxShadow: "0 6px 18px rgba(0,0,0,.06)" }}>
                  <div style={{ position: "relative", aspectRatio: "4/3" }}>
                    <img src={m.photo} alt={m.name} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
                  </div>
                  <div style={{ padding: "16px 14px", display: "flex", flexDirection: "column", flex: 1 }}>
                    <h4 style={{ fontFamily: "var(--font-display)", fontSize: 15.5, color: "#111", textTransform: "uppercase", margin: "0 0 6px", lineHeight: 1.15 }}>{m.name}</h4>
                    <p style={{ fontFamily: "var(--font-body)", fontSize: 12, color: "#666", lineHeight: 1.45, margin: "0 0 14px", flex: 1 }}>{m.desc}</p>
                    <a href={m.link} target="_blank" rel="noopener noreferrer" style={{ display: "inline-block", textAlign: "center", background: "var(--hp-red)", color: "#fff",
                      fontFamily: "var(--font-display)", fontSize: 11.5, padding: "9px 10px", borderRadius: 999, textDecoration: "none", letterSpacing: ".02em" }}>Ver sucursal</a>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

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

          {/* 8. PERROTE VIAJERO — mascota con outfits según sede */}
          <div style={{ marginTop: 70 }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 16, marginBottom: 24 }}>
              <div>
                <NeonHeading color="white" size="display" as="h2" style={{ margin: 0 }}>Perrote <span style={{ color: "var(--hp-red)", textShadow: "var(--glow-red)" }}>viajero</span></NeonHeading>
                <p style={{ fontFamily: "var(--font-body)", fontSize: 15, color: "var(--hp-gray)", margin: "10px 0 0", maxWidth: 480 }}>
                  Nuestra mascota se pone la camiseta de cada ciudad. Cambia de outfit según la sede, pero el sabor siempre es el mismo.
                </p>
              </div>
              <button onClick={() => scrollRail(1)} aria-label="Ver siguiente" style={{ width: 44, height: 44, flexShrink: 0, borderRadius: "50%", background: "var(--hp-red)", border: "none", color: "#fff", cursor: "pointer", display: "grid", placeItems: "center", fontSize: 18 }}>→</button>
            </div>
            <div ref={railRef} className="hp-suc-rail" style={{ display: "flex", gap: 16, overflowX: "auto", scrollSnapType: "x mandatory", paddingBottom: 6 }}>
              {viajero.map((v) => (
                <div key={v.tag} className="hp-card" style={{ scrollSnapAlign: "start", flex: "0 0 260px", borderRadius: "var(--radius-lg)", overflow: "hidden", border: "1px solid var(--color-border)", background: "#0e0e0e" }}>
                  <div style={{ position: "relative", aspectRatio: "3/4", background: "#151515" }}>
                    <img src={v.photo} alt={v.place} 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,.85) 0%, transparent 45%)" }} />
                    <div style={{ position: "absolute", left: 12, right: 12, bottom: 12 }}>
                      <div style={{ fontFamily: "var(--font-display)", fontSize: 12.5, color: "var(--hp-yellow)", letterSpacing: ".04em", marginBottom: 3 }}>{v.tag}</div>
                      <div style={{ fontFamily: "var(--font-display)", fontSize: 16, color: "#fff", textTransform: "uppercase", lineHeight: 1.15 }}>{v.place}</div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* 9. CIERRE — CTA */}
          <div style={{ marginTop: 70, marginBottom: 20, position: "relative", borderRadius: "var(--radius-lg)", overflow: "hidden", border: "1px solid var(--hp-red)",
            background: "radial-gradient(120% 100% at 0% 0%, rgba(255,212,0,.15), transparent 55%), radial-gradient(120% 100% at 100% 100%, rgba(255,49,49,.22), transparent 55%), #0a0a0a", padding: "56px 44px", textAlign: "center" }}>
            <NeonHeading color="white" size="display" as="h2" style={{ margin: 0 }}>De Madrid a México, <span style={{ color: "var(--hp-yellow)", textShadow: "var(--glow-yellow)" }}>el sabor sigue creciendo</span></NeonHeading>
            <p style={{ fontFamily: "var(--font-body)", fontSize: 16, color: "#fff", opacity: .9, maxWidth: 640, margin: "18px auto 30px", lineHeight: 1.6 }}>
              Hot Perrote nació para romper las reglas del hot dog tradicional. Hoy, con presencia en Madrid y una nueva etapa en México, seguimos llevando nuestra experiencia a estadios, eventos y puntos clave donde la gente busca comer rico, rápido y con actitud.
            </p>
            <div style={{ display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap" }}>
              <Button variant="primary" size="lg" onClick={() => (window.location.href = "/menu")}>Haz tu pedido</Button>
              <Button variant="ghost" size="lg" onClick={() => scrollTo(activeRef)}>Ver sucursales</Button>
            </div>
          </div>
        </div>

        <HPFooterInfo />
      </div>
    </div>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<SucursalesApp />);