// Hot Perrote landing — top sections: Hero, Qué es, Historia. Exposes window.HPTop.
const { NeonHeading, Button, Badge, FlameAccent, Icon } = window.HotPerroteDesignSystem_2cf767;

// Llama en la "o" de Perrote (como el wordmark de la marca)
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>
  );
}
function Perrote({ plural }) { return (<span style={{ whiteSpace: "nowrap" }}>Perr<Fuego />{plural ? "tes" : "te"}</span>); }
Object.assign(window, { HPWord: { Fuego, Perrote } });

const HERO_SLIDES = ["../../assets/ambiance/hero-pro.webp", "../../assets/ambiance/hero-combo.webp"];

function Hero({ go }) {
  const [heroIdx, setHeroIdx] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setHeroIdx((i) => (i + 1) % HERO_SLIDES.length), 6000);
    return () => clearInterval(id);
  }, []);
  return (
    <section data-screen-label="Hero" style={{
      position: "relative", minHeight: "94vh", display: "flex", alignItems: "center", overflow: "hidden",
    }}>
      {HERO_SLIDES.map((src, i) => (
        <img key={src} src={src} alt="" aria-hidden="true" className="hp-hero-bg"
          style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: "center right",
            opacity: i === heroIdx ? 1 : 0, transition: "opacity 1.4s ease" }} />
      ))}
      <div aria-hidden="true" style={{ position: "absolute", inset: 0,
        background: "linear-gradient(90deg, rgba(4,4,4,.97) 0%, rgba(4,4,4,.88) 32%, rgba(4,4,4,.35) 58%, transparent 100%)" }} />
      <div style={{ position: "relative", zIndex: 1, width: "100%", maxWidth: 1280, margin: "0 auto", padding: "40px 6vw 60px" }}>
        <div style={{ maxWidth: 640 }}>
          <NeonHeading color="white" size="hero" as="h1" style={{ margin: "0", fontSize: "clamp(40px, 4.7vw, 64px)", lineHeight: 1.08 }}>
            Los <Perrote plural /> de Madrid<br />llegan a <span style={{ color: "var(--hp-yellow)", textShadow: "var(--glow-yellow)" }}>CDMX</span>
          </NeonHeading>
          <p style={{ fontFamily: "var(--font-body)", fontSize: 21, lineHeight: 1.5, color: "#fff",
            maxWidth: 540, margin: "20px 0 30px", opacity: .95 }}>
            Hot dogs XXL con 23 cm de salchicha de res, pan brioche y crazy toppings. Vive la experiencia Hot Perrote México en el Estadio Alfredo Harp Helú.
          </p>
          <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
            <Button variant="primary" size="lg" onClick={() => go("Menú")}>Ver menú</Button>
            <Button variant="ghost" size="lg" onClick={() => go("Sucursales")}>Visítanos</Button>
          </div>
        </div>
      </div>
    </section>
  );
}

function QueEs() {
  const panels = [
    { icon: "sun", tone: "var(--hp-yellow)", title: "De día · Sports Bar",
      body: "Deportes en pantallas gigantes, comida para toda la familia y ambiente relajado. NFL, MLB y Liga MX en vivo.",
      horario: "Cocina: 12:00 pm – 11:00 pm" },
    { icon: "moon", tone: "var(--hp-red)", title: "De noche · Perreo",
      body: "La cocina cierra y el bar se enciende: reggaetón, DJ, mesas VIP, cubetas y coctelería hasta la madrugada.",
      horario: "Barra: hasta las 3:00 am" },
  ];
  const valores = [
    { t: "Perrotes XXL", d: "23 cm de salchicha de res" },
    { t: "Pantallas gigantes", d: "NFL · MLB · LMB · Liga MX" },
    { t: "Pet friendly", d: "Tu perro también es de la manada" },
    { t: "Casa Diablos", d: "En el Estadio Alfredo Harp Helú" },
  ];
  return (
    <section data-screen-label="Qué es" style={{ padding: "72px 6vw", maxWidth: 1200, margin: "0 auto" }}>
      <div style={{ display: "grid", gridTemplateColumns: "1.1fr .9fr", gap: 40, alignItems: "center", marginBottom: 54 }}>
        <div>
          <NeonHeading color="yellow" size="display" as="h2">¿Qué es Hot <Perrote />?</NeonHeading>
          <p style={{ fontFamily: "var(--font-body)", fontSize: 18, lineHeight: 1.6, color: "#fff", opacity: .92, margin: "16px 0 14px", maxWidth: 560 }}>
            Nacimos en Madrid con una idea sencilla: el hot dog no tiene por qué ser corriente.
            Lo volvimos <b style={{ color: "var(--hp-yellow)" }}>gourmet, XXL y con actitud</b> — y ahora cruzamos el charco
            para tropicalizarlo 100% al sabor de México, con hot dogs gourmet en pleno CDMX.
          </p>
          <p style={{ fontFamily: "var(--font-body)", fontSize: 16, lineHeight: 1.6, color: "var(--hp-gray)", margin: "0 0 22px", maxWidth: 560 }}>
            No somos solo una cadena de perrotes: somos el punto de reunión de <b style={{ color: "#fff" }}>la manada</b>.
            De día vemos deporte en pantallas gigantes con la familia; de noche subimos el volumen y el barrio entero se vuelve perreo.
            Comida premium, bebida sin miedo y ambiente que no encuentras en otro lado.
          </p>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
            {valores.map((v) => (
              <div key={v.t} style={{ borderLeft: "3px solid var(--hp-red)", paddingLeft: 12 }}>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 17, color: "#fff", textTransform: "uppercase" }}>{v.t}</div>
                <div style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "var(--hp-gray)" }}>{v.d}</div>
              </div>
            ))}
          </div>
        </div>
        <div style={{ position: "relative", display: "grid", placeItems: "center" }}>
          <div style={{ position: "absolute", width: 320, height: 320, borderRadius: "50%",
            background: "radial-gradient(circle, rgba(255,212,0,.28), transparent 65%)", filter: "blur(10px)" }} />
          <img src="../../assets/mascot/mascota.webp" alt="Mascota Hot Perrote"
            style={{ position: "relative", width: "min(340px, 30vw)", filter: "drop-shadow(0 24px 34px rgba(0,0,0,.6))" }} />
        </div>
      </div>
      <p style={{ textAlign: "center", fontFamily: "var(--font-body)", fontSize: 18, color: "var(--hp-gray)", margin: "0 auto 30px", maxWidth: 620 }}>
        Un sports bar con doble personalidad. La fiesta cambia con el reloj.
      </p>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
        {panels.map((p) => (
          <div key={p.title} style={{ background: "rgba(20,20,20,.66)", border: `1px solid ${p.tone}`,
            borderRadius: "var(--radius-lg)", padding: 28, backdropFilter: "blur(6px)" }}>
            <div style={{ fontSize: 34 }}><Icon name={p.icon} size={34} color={p.tone} glow /></div>
            <h3 style={{ fontFamily: "var(--font-display)", fontSize: 26, color: p.tone, textTransform: "uppercase", margin: "10px 0 8px" }}>{p.title}</h3>
            <p style={{ fontFamily: "var(--font-body)", fontSize: 16, lineHeight: 1.5, color: "#fff", opacity: .9, margin: 0 }}>{p.body}</p>
            <div style={{ marginTop: 16, fontFamily: "var(--font-body)", fontWeight: 700, textTransform: "uppercase",
              letterSpacing: ".05em", fontSize: 13, color: p.tone }}>{p.horario}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Historia() {
  const steps = [
    { yr: "Madrid", txt: "Nace Hot Perrote: hot dogs gourmet XXL que se vuelven leyenda en España." },
    { yr: "El salto", txt: "La manada crece. La marca cruza el charco con un nuevo concepto: sports bar de día, antro de noche." },
    { yr: "México", txt: "Aterriza en CDMX, en casa de los Diablos Rojos. Tropicalizado 100% al sabor mexicano." },
  ];
  return (
    <section data-screen-label="Historia" style={{ padding: "72px 6vw", maxWidth: 1100, margin: "0 auto" }}>
      <NeonHeading color="white" size="display" as="h2" style={{ marginBottom: 8 }}>Nuestra historia</NeonHeading>
      <p style={{ fontFamily: "var(--font-body)", fontSize: 18, color: "var(--hp-gray)", margin: "0 0 40px" }}>De España a México, misma bestia.</p>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 20 }}>
        {steps.map((s, i) => (
          <div key={i} style={{ position: "relative", paddingTop: 20 }}>
            <div style={{ height: 4, background: i === 0 ? "var(--hp-yellow)" : i === 1 ? "var(--hp-red)" : "linear-gradient(90deg,var(--hp-red),var(--hp-yellow))", borderRadius: 4, marginBottom: 18 }} />
            <h3 style={{ fontFamily: "var(--font-display)", fontSize: 24, color: "var(--hp-yellow)", textTransform: "uppercase", margin: "0 0 8px" }}>{s.yr}</h3>
            <p style={{ fontFamily: "var(--font-body)", fontSize: 15, lineHeight: 1.5, color: "#fff", opacity: .88, margin: 0 }}>{s.txt}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { HPTop: { Hero, QueEs, Historia } });