// Hot Perrote — página Nosotros (historia de marca).
const { NavBar, NeonHeading, Icon, FlameAccent } = window.HotPerroteDesignSystem_2cf767;
const NAV = ["Inicio", "Nosotros", "Menú", "Sucursales", "Club Hot Perrote", "Franquicias", "Contacto"];

function Fuego() {
  return (
    <svg viewBox="0 0 384 512" aria-hidden="true" style={{ height: "0.82em", width: "auto", verticalAlign: "-0.07em", margin: "0 .01em",
      fill: "var(--hp-red)", filter: "drop-shadow(0 0 10px rgba(255,49,49,.85))" }}>
      <path d="M216 23.86c0-23.8-30.65-32.77-44.15-13.04C48 191.85 224 200 224 288c0 35.63-29.11 64.46-64.85 63.99-35.17-.45-63.15-29.77-63.15-64.94v-85.51c0-21.7-26.47-32.23-41.43-16.5C27.8 213.16 0 261.33 0 320c0 105.87 86.13 192 192 192s192-86.13 192-192c0-170.29-168-193.85-168-296.14z" />
    </svg>
  );
}

// Pin de mapa y avión — mismo lenguaje visual que el arte del hero (España=amarillo, México=rojo)
function Pin({ color = "var(--hp-yellow)", style, className }) {
  return (
    <svg viewBox="0 0 24 24" width="24" height="24" fill={color} aria-hidden="true" className={className}
      style={{ filter: `drop-shadow(0 0 7px ${color})`, display: "block", ...style }}>
      <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>
  );
}
function Plane() {
  return (
    <svg viewBox="0 0 24 24" width="34" height="34" fill="var(--hp-yellow)" aria-hidden="true"
      style={{ filter: "drop-shadow(0 0 12px rgba(255,212,0,.95))", display: "block" }}>
      <path d="M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2.5 1.5V22l4-1 4 1v-1.5L13 19v-5.5z" />
    </svg>
  );
}

function NosotrosApp() {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const navHidden = window.HPNavScroll() && !menuOpen;
  window.HPLogoHome();
  const journeyRef = React.useRef(null);
  const journeyTrackRef = React.useRef(null);
  const planeRef = React.useRef(null);

  // el avión serpentea Madrid → México siguiendo la curva de la ruta, y cada parada aparece como un hito al hacer scroll
  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 amp = window.matchMedia("(max-width: 760px)").matches ? 9 : 42;
      window.ScrollTrigger.create({
        trigger: journeyTrackRef.current,
        start: "top 65%",
        end: "bottom 55%",
        scrub: 0.5,
        onUpdate: (self) => {
          const p = self.progress;
          const wave = Math.sin(p * Math.PI * 4);
          gsap.set(planeRef.current, { top: `${p * 100}%`, left: `calc(50% + ${wave * amp}px)`, rotate: 180 });
        },
      });

      journeyRef.current.querySelectorAll(".hp-journey-block").forEach((block) => {
        const text = block.querySelector(".hp-journey-text");
        const photo = block.querySelector(".hp-journey-photo");
        const marker = block.querySelector(".hp-journey-marker");
        gsap.set([text, photo].filter(Boolean), { opacity: 0, y: 34 });
        if (photo) gsap.set(photo, { clipPath: "inset(0 0 100% 0)" });
        window.ScrollTrigger.create({
          trigger: block,
          start: "top 82%",
          onEnter: () => {
            gsap.to(text, { opacity: 1, y: 0, duration: .6, ease: "power2.out" });
            if (photo) gsap.to(photo, { opacity: 1, y: 0, clipPath: "inset(0 0 0% 0)", duration: .9, ease: "power2.out", delay: .12 });
            if (marker) marker.classList.add("hp-journey-marker-on");
          },
          onLeaveBack: () => { if (marker) marker.classList.remove("hp-journey-marker-on"); },
        });
      });
    }, journeyRef.current);
    return () => ctx.revert();
  }, []);
  const nav = (label) => {
    if (label === "Nosotros") { window.scrollTo({ top: 0, behavior: "smooth" }); return; }
    if (label === "Menú") { window.location.href = "/menu"; 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; }
    const map = { "Inicio": "", "Contacto": "#contacto" };
    window.location.href = "/" + (map[label] || "");
  };
  const founders = [
    { photo: "../../assets/team/pablo-soria.webp", name: "Pablo Soria", role: "Co-Fundador · Director de Marketing",
      bio: "Publicista y estratega digital español. Convirtió a Hot Perrote en una marca viral y reconocida en Madrid." },
    { photo: "../../assets/team/daniel-madrid.webp", name: "Daniel Madrid", role: "Co-Fundador · Director Gastronómico",
      bio: "Empresario mexicano con más de 15 años en hostelería. Sus raíces son las que hoy traen Hot Perrote de vuelta a casa." },
  ];
  const journey = [
    { year: "2024", tag: "Madrid, España", title: "Todo empezó con una idea sencilla",
      body: "Todo comenzó en Madrid, con una pregunta que parecía simple: ¿por qué el hot dog tiene que ser comida rápida y ya? Así nació Hot Perrote: inspirado en el clásico estilo Chicago, pero reinventado para el paladar español y europeo, con pan brioche, salchicha XXL y toppings que no le piden permiso a nadie. Desde el primer bocado quedó claro que esto no era solo un hot dog — era una experiencia completa, gourmet, divertida y con mucha actitud.",
      photo: "../../assets/sucursal/madrid/bernabeu-fachada.webp", photoAlt: "Fachada Hot Perrote Bernabéu, Madrid" },
    { tag: "Los fundadores", title: "Dos visiones, una obsesión: hacerlo bien",
      body: "Detrás de Hot Perrote están Pablo Soria, cofundador y director de marketing, y Daniel Madrid, cofundador y director gastronómico. Pablo le dio a la marca esa chispa digital que la volvió viral e imposible de ignorar en redes; Daniel puso el oficio y la obsesión por el sabor que convirtió cada receta en algo memorable. Uno construye la marca que ves, el otro construye el sabor que se te antoja — juntos, la fórmula que hizo despegar a Hot Perrote.",
      founders: true },
    { year: "Oct 2024", tag: "Nace la marca", title: "El día que Hot Perrote salió a la calle",
      body: "A finales de octubre de 2024, Hot Perrote abrió sus puertas por primera vez en Madrid. No pasó ni un mes antes de que las filas empezaran a formarse y los videos empezaran a viralizarse: la gente no solo venía por el hot dog, venía por la experiencia completa. Redes sociales, boca en boca y una comunidad que crecía cada semana lo convirtieron en una de las marcas de street food más comentadas de la ciudad.",
      photo: "../../assets/sucursal/madrid/wanda-foodtruck.webp", photoAlt: "Food truck Hot Perrote en Wanda Metropolitano" },
    { year: "2024–25", tag: "La manada crece", title: "De un local a un fenómeno",
      body: "Lo que empezó en un solo punto de Madrid se multiplicó rápido: hoy son +5 locales, +55,000 perritos vendidos y +200 eventos después, con una base de fans — la manada — que no dejaba de crecer. Hot Perrote dejó de ser un hot dog gourmet para convertirse en un punto de encuentro: ahí donde hay buena comida, buena música y buena compañía, siempre hay un Hot Perrote cerca.",
      photo: "../../assets/sucursal/madrid/fenomeno-local.webp", photoAlt: "Ambiente lleno en un local Hot Perrote" },
    { year: "Hoy", tag: "CDMX, México", title: "La fiesta cruza el Atlántico",
      body: "Con la marca ya consolidada en España, llegó el siguiente reto: México. Y no podíamos empezar en cualquier lugar — aterrizamos en casa de los Diablos Rojos, en el Estadio Alfredo Harp Helú, para fusionar la pasión del hot dog gourmet con la energía de un sports bar de verdad. Es solo el primer paso: la meta es seguir creciendo, estadio por estadio, ciudad por ciudad, hasta que Hot Perrote sea sinónimo de fiesta en cada rincón de México.",
      photo: "../../assets/sucursal/wow-harp.webp", photoAlt: "Hot dogs gourmet Hot Perrote en el Estadio Alfredo Harp Helú" },
  ];
  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="Nosotros" 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 === "Nosotros" ? "on" : ""} onClick={(e) => { e.preventDefault(); nav(l); setMenuOpen(false); }}>{l}</a>))}
        </div>

        {/* HERO — historia sobre fondo neón */}
        <section style={{ position: "relative", minHeight: "90vh", display: "flex", alignItems: "center", overflow: "hidden" }}>
          <img src="../../assets/ambiance/fondo-nosotros.webp?v=2" alt="" aria-hidden="true" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: "center right" }} />
          <div aria-hidden="true" style={{ position: "absolute", inset: 0, background: "linear-gradient(90deg, rgba(6,6,6,.96) 0%, rgba(6,6,6,.85) 34%, rgba(6,6,6,.25) 60%, transparent 100%)" }} />
          <div style={{ position: "relative", zIndex: 1, width: "100%", maxWidth: 1240, margin: "0 auto", padding: "60px 6vw" }}>
            <div style={{ maxWidth: 620 }}>
              <div className="kicker" style={{ fontFamily: "var(--font-display)", color: "var(--hp-red)", letterSpacing: ".18em", fontSize: 14, textTransform: "uppercase", marginBottom: 12 }}>Nuestra historia</div>
              <NeonHeading color="yellow" size="hero" as="h1" style={{ margin: 0, lineHeight: .95 }}>
                De Madrid a México<br /><span style={{ color: "#fff" }}>nació un </span><span style={{ color: "var(--hp-red)", textShadow: "var(--glow-red)", whiteSpace: "nowrap" }}>Perr<Fuego />te</span>
              </NeonHeading>
              <p style={{ fontFamily: "var(--font-body)", fontSize: 18, lineHeight: 1.6, color: "#fff", opacity: .92, margin: "22px 0 22px" }}>
                Nacimos en Madrid con una idea simple: un hot dog gourmet, XXL y con mucha actitud. Hoy cruzamos el charco para traerlo a México con más sabor, más barrio y más fiesta.
              </p>
              <p style={{ fontFamily: "var(--font-body)", fontSize: 17, color: "#fff", borderLeft: "3px solid var(--hp-red)", paddingLeft: 14, margin: 0 }}>
                Aquí no vienes solo por un hot dog. <b style={{ color: "var(--hp-yellow)" }}>Vienes por la experiencia completa.</b>
              </p>
            </div>
          </div>
        </section>

        {/* NUESTRA HISTORIA — storytelling cinematográfico con scroll: cada bloque es un hito del viaje Madrid → México */}
        <section ref={journeyRef} className="hp-journey" style={{ padding: "20px 6vw 100px", maxWidth: 1180, margin: "0 auto", position: "relative", overflow: "hidden" }}>
          <div style={{ textAlign: "center", fontFamily: "var(--font-display)", color: "var(--hp-yellow)", letterSpacing: ".12em", fontSize: "clamp(14px,1.6vw,17px)", textTransform: "uppercase", marginBottom: 6, opacity: .85 }}>Te contamos cómo comenzó</div>
          <NeonHeading color="white" size="hero" as="h2" style={{ textAlign: "center", margin: "0 auto 84px" }}>Nuestra historia</NeonHeading>

          {/* recorrido: ruta curva + avión, contenido exactamente a la altura de los hitos (no se mete en el cierre) */}
          <div ref={journeyTrackRef} style={{ position: "relative" }}>
            <div aria-hidden="true" className="hp-journey-path" style={{ position: "absolute", left: "50%", top: 0, bottom: 0, width: 160, transform: "translateX(-50%)", zIndex: 0, pointerEvents: "none" }}>
              <svg viewBox="0 0 100 1000" preserveAspectRatio="none" width="100%" height="100%" style={{ display: "block", overflow: "visible" }}>
                <defs>
                  <linearGradient id="hp-journey-grad" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="0%" stopColor="var(--hp-yellow)" />
                    <stop offset="100%" stopColor="var(--hp-red)" />
                  </linearGradient>
                </defs>
                <path d="M50,0 C75,60 75,190 50,250 C25,310 25,440 50,500 C75,560 75,690 50,750 C25,810 25,940 50,1000"
                  fill="none" stroke="url(#hp-journey-grad)" strokeWidth="2.5" strokeDasharray="1 11" strokeLinecap="round" opacity=".55" />
              </svg>
              <Pin color="var(--hp-yellow)" style={{ position: "absolute", left: "50%", top: 0, transform: "translate(-50%,-46%)" }} />
              <Pin color="var(--hp-red)" style={{ position: "absolute", left: "50%", bottom: 0, transform: "translate(-50%,46%)" }} />
              <div ref={planeRef} style={{ position: "absolute", left: "50%", top: "0%", transform: "translate(-50%,-50%)" }}><Plane /></div>
            </div>

            {/* hitos del viaje */}
            <div style={{ display: "flex", flexDirection: "column", gap: "clamp(56px, 8vw, 96px)", position: "relative", zIndex: 1 }}>
              {journey.map((j, i) => {
                const flip = i % 2 === 1;
                return (
                  <div key={i} className={"hp-journey-block" + (flip ? " flip" : "")} style={{ display: "grid", gridTemplateColumns: "1fr 70px 1fr", alignItems: "start", gap: 4 }}>
                    <div className="hp-journey-marker" style={{ gridColumn: 2, justifySelf: "center", marginTop: 8 }}>
                      <span className="dot" aria-hidden="true" style={{ display: "block", width: 13, height: 13, borderRadius: "50%", background: "#3a3a3a", border: "2px solid var(--hp-gray)", transition: "all .4s ease" }} />
                    </div>

                    <div className="hp-journey-text" style={{ gridColumn: flip ? 3 : 1, gridRow: 1 }}>
                      {j.year && <div style={{ fontFamily: "var(--font-display)", fontSize: 15, color: "var(--hp-yellow)", letterSpacing: ".04em", marginBottom: 8 }}>{j.year}</div>}
                      <div style={{ fontFamily: "var(--font-display)", fontSize: 12.5, color: "var(--hp-red)", letterSpacing: ".1em", textTransform: "uppercase", marginBottom: 6 }}>{j.tag}</div>
                      <h3 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(22px,2.4vw,28px)", color: "#fff", textTransform: "uppercase", margin: "0 0 12px", lineHeight: 1.15 }}>{j.title}</h3>
                      <p style={{ fontFamily: "var(--font-body)", fontSize: 15.5, lineHeight: 1.7, color: "#fff", opacity: .88, margin: 0, maxWidth: 480 }}>{j.body}</p>
                    </div>

                    <div className="hp-journey-photo" style={{ gridColumn: flip ? 1 : 3, gridRow: 1 }}>
                      {j.photo && (
                        <img src={j.photo} alt={j.photoAlt} loading="lazy" style={{ width: "100%", aspectRatio: "4/3", objectFit: "cover", borderRadius: "var(--radius-lg)", border: "1px solid var(--color-border)", boxShadow: "0 18px 40px rgba(0,0,0,.5)" }} />
                      )}
                      {j.founders && (
                        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
                          {founders.map((f) => (
                            <div key={f.name} className="hp-card" style={{ border: "1px solid var(--color-border)", borderRadius: "var(--radius-lg)", padding: "18px 14px 20px", background: "rgba(10,10,10,.55)", textAlign: "center" }}>
                              <img src={f.photo} alt={f.name} style={{ width: "100%", maxWidth: 150, aspectRatio: "1/1", margin: "0 auto", borderRadius: "50%", objectFit: "cover", border: "3px solid var(--hp-yellow)", boxShadow: "0 0 22px rgba(255,212,0,.4)" }} />
                              <div style={{ fontFamily: "var(--font-display)", fontSize: 16, color: "#fff", textTransform: "uppercase", lineHeight: 1.1, marginTop: 12 }}>{f.name}</div>
                              <div style={{ fontFamily: "var(--font-body)", fontWeight: 700, fontSize: 10.5, color: "var(--hp-red)", textTransform: "uppercase", letterSpacing: ".03em", margin: "4px 0 0" }}>{f.role}</div>
                            </div>
                          ))}
                        </div>
                      )}
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

          <p style={{ textAlign: "center", fontFamily: "var(--font-display)", fontSize: "clamp(20px,2.4vw,28px)", color: "#fff", textTransform: "uppercase", lineHeight: 1.35, margin: "clamp(56px,8vw,96px) auto 0", maxWidth: 640, position: "relative", zIndex: 1 }}>
            Hot Perrote no es solo un hot dog.<br />
            <span style={{ color: "var(--hp-yellow)", textShadow: "var(--glow-yellow)" }}>Es la previa, el partido, el antojo y la experiencia completa.</span>
          </p>
        </section>

        {/* LA NOCHE EMPIEZA EN HOT PERROTE */}
        <section style={{ padding: "10px 6vw 80px", maxWidth: 1100, margin: "0 auto" }}>
          <div style={{ position: "relative", borderRadius: "var(--radius-lg)", overflow: "hidden", border: "1px solid var(--hp-red)",
            background: "radial-gradient(120% 100% at 100% 0%, rgba(255,49,49,.25), transparent 55%), #0a0a0a", padding: "54px 44px", textAlign: "center" }}>
            <div style={{ display: "flex", justifyContent: "center", marginBottom: 14 }}><Icon name="moon" size={40} color="var(--hp-red)" glow /></div>
            <NeonHeading color="red" size="display" as="h2" style={{ margin: 0 }}>La noche empieza en <span style={{ color: "var(--hp-yellow)", textShadow: "var(--glow-yellow)" }}>Hot Perrote</span></NeonHeading>
            <p style={{ fontFamily: "var(--font-body)", fontSize: 19, color: "#fff", opacity: .92, maxWidth: 640, margin: "18px auto 8px", lineHeight: 1.5 }}>
              Servicio de barra hasta la madrugada: cocteles de autor, música y el mejor ambiente para seguirla.
            </p>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 15, color: "var(--hp-yellow)", textTransform: "uppercase", letterSpacing: ".05em", marginTop: 14 }}>Barra abierta hasta las 3:00 am</div>
          </div>
        </section>

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