// Hot Perrote landing — bottom sections: Club, Franquicias, Contacto. Exposes window.HPBottom.
const { NeonHeading, Button, Input, Badge, FlameAccent, Icon } = window.HotPerroteDesignSystem_2cf767;

// Access key de Web3Forms — los formularios de Club, Franquicias y Contacto envían aquí.
const WEB3FORMS_ACCESS_KEY = "f728efa7-ec85-4c26-9bb3-7640e2165efb";

function useForm(key, subject) {
  const [sent, setSent] = React.useState(false);
  const submit = async (e) => {
    e.preventDefault();
    const data = Object.fromEntries(new FormData(e.target).entries());
    try { localStorage.setItem("hp_" + key, JSON.stringify({ ...data, at: Date.now() })); } catch (_) {}
    if (WEB3FORMS_ACCESS_KEY && WEB3FORMS_ACCESS_KEY !== "REEMPLAZAR_CON_TU_ACCESS_KEY") {
      try {
        await fetch("https://api.web3forms.com/submit", {
          method: "POST",
          headers: { "Content-Type": "application/json", Accept: "application/json" },
          body: JSON.stringify({ access_key: WEB3FORMS_ACCESS_KEY, subject: subject, from_name: "Hot Perrote México — Sitio web", ...data }),
        });
      } catch (_) {}
    }
    setSent(true);
  };
  return { sent, submit };
}

function Club() {
  const { sent, submit } = useForm("club", "Nuevo registro — Club Hot Perrote");
  const benefits = [
    ["coin", "Hot Coins", "Gana puntos en cada compra."],
    ["gift", "Premios y sorpresas", "Hot dogs gratis, merch y experiencias."],
    ["cake", "Beneficios en tu cumple", "Porque tu día merece algo perrote."],
    ["paw", "Pet friendly", "Premios también para tus mascotas."],
  ];
  return (
    <section data-screen-label="Club Hot Perrote" style={{ padding: "72px 6vw", maxWidth: 1200, margin: "0 auto" }}>
      <div className="hp-club-grid" style={{ display: "grid", gridTemplateColumns: "1fr .9fr", gap: 44, alignItems: "center" }}>
        <div>
          <NeonHeading color="white" size="display" as="h2">Club <span style={{ color: "var(--hp-red)", textShadow: "var(--glow-red)" }}>Hot</span> <span style={{ color: "var(--hp-yellow)", textShadow: "var(--glow-yellow)" }}>Perrote</span></NeonHeading>
          <p style={{ fontFamily: "var(--font-body)", fontSize: 18, color: "#fff", opacity: .9, margin: "14px 0 26px", maxWidth: 460, lineHeight: 1.5 }}>
            La comunidad más perrote tiene premio. Únete y disfruta beneficios exclusivos que sí valen la pena.
          </p>
          <div className="hp-club-benefits" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
            {benefits.map(([ic, t, d]) => (
              <div key={t} style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
                <div style={{ flexShrink: 0, marginTop: 2 }}><Icon name={ic} size={26} color="var(--hp-yellow)" glow /></div>
                <div>
                  <div style={{ fontFamily: "var(--font-display)", fontSize: 17, color: "var(--hp-yellow)", textTransform: "uppercase" }}>{t}</div>
                  <div style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "var(--hp-gray)", lineHeight: 1.4 }}>{d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
        <div style={{ background: "rgba(12,12,12,.8)", border: "1px solid var(--hp-red)", borderRadius: "var(--radius-lg)", padding: 30, backdropFilter: "blur(8px)" }}>
          {!sent ? (
            <form onSubmit={submit} style={{ display: "flex", flexDirection: "column", gap: 14 }}>
              <div style={{ textAlign: "center", marginBottom: 4 }}>
                <h3 style={{ fontFamily: "var(--font-display)", fontSize: 28, color: "#fff", textTransform: "uppercase", margin: 0 }}>Registro rápido</h3>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 14, color: "var(--hp-yellow)" }}>Empieza a sumar hoy</div>
              </div>
              <Input name="nombre" label="Nombre completo" placeholder="Tu nombre" required />
              <Input name="email" label="Correo electrónico" type="email" placeholder="tucorreo@mail.com" required />
              <div className="hp-club-form-row" style={{ display: "flex", gap: 12 }}>
                <Input name="tel" label="Teléfono móvil" placeholder="55 0000 0000" />
                <Input name="ciudad" label="Ciudad" placeholder="CDMX" className="hp-club-ciudad" style={{ maxWidth: 130 }} />
              </div>
              <label style={{ display: "flex", gap: 8, alignItems: "flex-start", fontFamily: "var(--font-body)", fontSize: 12, color: "var(--hp-gray)" }}>
                <input type="checkbox" required style={{ marginTop: 2 }} /> Acepto términos, condiciones y aviso de privacidad.
              </label>
              <Button variant="primary" size="lg" type="submit" fullWidth>Quiero entrar →</Button>
              <div style={{ textAlign: "center", fontFamily: "var(--font-body)", fontSize: 12, color: "var(--hp-gray)" }}>100% gratis. Sin spam, solo comida.</div>
            </form>
          ) : (
            <div style={{ textAlign: "center", padding: "40px 10px" }}>
              <FlameAccent size={64} color="var(--hp-yellow)" style={{ margin: "0 auto 10px" }} />
              <h3 style={{ fontFamily: "var(--font-display)", fontSize: 30, color: "var(--hp-yellow)", textTransform: "uppercase" }}>¡Ya eres de la manada!</h3>
              <p style={{ fontFamily: "var(--font-body)", color: "#fff", opacity: .85 }}>Revisa tu correo para empezar a sumar Hot Coins.</p>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

// íconos propios para Formatos de franquicia (el set del bundle no cubre estos)
function IconBuilding({ color = "var(--hp-yellow)", size = 30 }) {
  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">
      <path d="M4 21V9l8-5 8 5v12" />
      <path d="M4 21h16M4 9h16" />
      <rect x="9.5" y="13" width="5" height="8" />
    </svg>
  );
}
function IconTruck({ color = "var(--hp-yellow)", size = 30 }) {
  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">
      <rect x="1" y="7" width="13" height="10" rx="1" />
      <path d="M14 10h4l3 3v4h-7z" />
      <circle cx="6" cy="19" r="1.6" />
      <circle cx="17" cy="19" r="1.6" />
    </svg>
  );
}
function IconKiosk({ color = "var(--hp-yellow)", size = 30 }) {
  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">
      <path d="M3 8l9-5 9 5-9 5-9-5z" />
      <path d="M3 8v8l9 5 9-5V8" />
      <path d="M12 13v8" />
    </svg>
  );
}

function Franquicias() {
  const { sent, submit } = useForm("franquicia", "Nueva solicitud — Franquicias Hot Perrote");
  const formRef = React.useRef(null);
  const scrollToForm = () => formRef.current && formRef.current.scrollIntoView({ behavior: "smooth", block: "start" });

  const porque = [
    { Icon: (ip) => <Icon name="star" {...ip} />, color: "var(--hp-yellow)", t: "Producto fácil de amar", d: "Combinaciones llamativas, sabor contundente y una propuesta para públicos amplios." },
    { Icon: (ip) => <Icon name="bolt" {...ip} />, color: "var(--hp-red)", t: "Operación ágil", d: "Menú enfocado, servicio express y formatos pensados para alto flujo." },
    { Icon: (ip) => <FlameAccent size={ip.size} color={ip.color} />, color: "var(--hp-yellow)", size: 52, badge: 78, t: "Marca con personalidad", d: "Un concepto visual, divertido y memorable, diseñado para destacar en redes y en punto de venta." },
    { Icon: (ip) => <Icon name="trophy" {...ip} />, color: "var(--hp-red)", t: "Potencial en México", d: "Estadios, eventos, plazas, zonas urbanas y ciudades con alto consumo de experiencias gastronómicas." },
  ];

  const metrics = [
    { n: "+5", d: "Locales abiertos" },
    { n: "+55K", d: "Perritos vendidos" },
    { n: "+200", d: "Eventos" },
    { n: "+300K", d: "Views al mes en RRSS" },
  ];

  const formatos = [
    { Icon: IconBuilding, t: "Local urbano", d: "Para zonas con flujo constante, vida nocturna, oficinas, universidades o corredores gastronómicos." },
    { Icon: IconTruck, t: "Foodtruck / eventos", d: "Ideal para estadios, conciertos, festivales, ferias y puntos de alto volumen." },
    { Icon: IconKiosk, t: "Punto compacto", d: "Formato ágil para plazas, food courts, arenas, recintos deportivos o ubicaciones estratégicas." },
    { Icon: (ip) => <Icon name="screens" {...ip} />, t: "Sede sports bar", d: "Una experiencia más completa para ciudades clave, con pantallas, ambiente, comunidad y consumo recurrente." },
  ];

  const soporte = [
    "Capacitación inicial", "Manual operativo", "Acompañamiento de apertura", "Estándares de producto",
    "Branding", "Materiales de marketing", "Estrategia de lanzamiento", "Soporte comercial",
  ];

  const FranquiciaForm = () => (
    !sent ? (
      <form onSubmit={submit} style={{ display: "flex", flexDirection: "column", gap: 14 }}>
        <h3 style={{ fontFamily: "var(--font-display)", fontSize: 24, color: "#fff", textTransform: "uppercase", margin: 0, textAlign: "center" }}>Llevemos Hot Perrote <span style={{ color: "var(--hp-yellow)" }}>a tu ciudad</span></h3>
        <p style={{ fontFamily: "var(--font-body)", fontSize: 14, color: "var(--hp-gray)", margin: 0, textAlign: "center" }}>
          Déjanos tus datos y cuéntanos dónde quieres abrir. Nuestro equipo revisará tu perfil y te compartirá la información para iniciar el proceso.
        </p>
        <Input name="nombre" label="Nombre completo" required />
        <Input name="email" label="Correo electrónico" type="email" required />
        <Input name="tel" label="Teléfono" type="tel" />
        <Input name="ciudad" label="Ciudad de interés" />
        <Button variant="secondary" size="lg" type="submit" fullWidth>Quiero recibir información</Button>
        <div style={{ textAlign: "center", fontFamily: "var(--font-body)", fontSize: 12, color: "var(--hp-gray)", display: "flex", alignItems: "center", justifyContent: "center", gap: 6 }}><Icon name="check" size={13} color="var(--hp-gray)" /> Tu información está protegida.</div>
      </form>
    ) : (
      <div style={{ textAlign: "center", padding: "40px 10px" }}>
        <FlameAccent size={64} color="var(--hp-yellow)" style={{ margin: "0 auto 10px" }} />
        <h3 style={{ fontFamily: "var(--font-display)", fontSize: 26, color: "var(--hp-yellow)", textTransform: "uppercase" }}>¡Gracias!</h3>
        <p style={{ fontFamily: "var(--font-body)", color: "#fff", opacity: .85 }}>Nuestro equipo de expansión te contactará muy pronto.</p>
      </div>
    )
  );

  return (
    <>
      {/* 1. HERO — fondo completo con la imagen de franquicia */}
      <div data-screen-label="Franquicias" style={{ position: "relative", width: "100vw", marginLeft: "calc(50% - 50vw)", minHeight: "82vh", overflow: "hidden", background: "#0e0e0e" }}>
        <img src="../../assets/ambiance/hero-franquicia.webp" alt="Perrotes gourmet Hot Perrote" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
        <div aria-hidden="true" style={{ position: "absolute", inset: 0, background: "linear-gradient(90deg, rgba(6,6,6,.96) 0%, rgba(6,6,6,.78) 40%, rgba(6,6,6,.25) 65%, transparent 100%), linear-gradient(180deg, rgba(0,0,0,.3) 0%, transparent 30%, rgba(0,0,0,.4) 100%)" }} />
        <div style={{ position: "relative", zIndex: 2, minHeight: "82vh", display: "flex", alignItems: "center", padding: "60px 6vw", maxWidth: 1240, margin: "0 auto" }}>
          <div style={{ maxWidth: 560 }}>
            <div style={{ fontFamily: "var(--font-display)", color: "var(--hp-yellow)", fontSize: 13, letterSpacing: ".14em", textTransform: "uppercase", marginBottom: 10 }}>Franquicias</div>
            <NeonHeading color="white" size="hero" as="h1">Sé parte de <span style={{ color: "var(--hp-yellow)", textShadow: "var(--glow-yellow)" }}>la manada</span></NeonHeading>
            <p style={{ fontFamily: "var(--font-body)", fontSize: 18, color: "#fff", opacity: .9, margin: "20px 0 28px", maxWidth: 480, lineHeight: 1.55 }}>
              Lleva a tu ciudad una marca nacida en Madrid, probada en estadios, eventos y zonas de alto tráfico. Hot Perrote México llega con un modelo de hot dogs gourmet pensado para crecer rápido, operar fácil y encender la pasión de cada sede.
            </p>
            <Button variant="primary" size="lg" onClick={scrollToForm}>Quiero información de franquicia →</Button>
          </div>
        </div>
      </div>

      {/* 2. TICKER */}
      <div className="hp-franq-ticker" aria-hidden="true" style={{ width: "100vw", marginLeft: "calc(50% - 50vw)", overflow: "hidden", background: "var(--hp-red)", padding: "13px 0" }}>
        <div className="hp-franq-ticker-track" style={{ display: "flex", width: "max-content" }}>
          {[0, 1].map((k) => (
            <div key={k} style={{ display: "flex", alignItems: "center", flexShrink: 0 }}>
              {["FRANQUICIAS", "ESTADIOS", "FOODTRUCKS", "EVENTOS", "MÉXICO", "MADRID"].map((w) => (
                <span key={w} style={{ display: "flex", alignItems: "center", gap: 26, fontFamily: "var(--font-display)", fontSize: 19, color: "#fff", textTransform: "uppercase", padding: "0 26px", whiteSpace: "nowrap" }}>
                  {w}<span aria-hidden="true" style={{ color: "var(--hp-yellow)" }}>★</span>
                </span>
              ))}
            </div>
          ))}
        </div>
      </div>

      {/* 3. ¿POR QUÉ HOT PERROTE? */}
      <section style={{ position: "relative", padding: "70px 6vw 60px", maxWidth: 1200, margin: "0 auto", overflow: "hidden" }}>
        <div aria-hidden="true" style={{ position: "absolute", top: -80, left: "50%", transform: "translateX(-50%)", width: 640, height: 460,
          background: "radial-gradient(closest-side, rgba(255,212,0,.14), transparent 70%)", pointerEvents: "none" }} />
        <div style={{ position: "relative", textAlign: "center" }}>
          <img src="../../assets/logo/isotipo-hot-perrote.webp" alt="" aria-hidden="true"
            style={{ width: "clamp(90px,9vw,130px)", height: "auto", margin: "0 auto 18px", display: "block", filter: "drop-shadow(0 0 22px rgba(255,212,0,.4))" }} />
          <div style={{ fontFamily: "var(--font-body)", fontWeight: 800, fontSize: 12, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--hp-yellow)", marginBottom: 6 }}>¿Por qué Hot Perrote?</div>
          <NeonHeading color="white" size="display" as="h2" style={{ marginBottom: 12 }}>Una marca hecha para <span style={{ color: "var(--hp-red)", textShadow: "var(--glow-red)" }}>vender, compartirse y crecer</span></NeonHeading>
          <p style={{ fontFamily: "var(--font-body)", fontSize: 16, color: "var(--hp-gray)", margin: "0 auto 44px", maxWidth: 700, lineHeight: 1.6 }}>
            Hot Perrote convierte un producto universal en una experiencia de marca: hot dogs gourmet, servicio rápido, identidad viral y una vibra deportiva que conecta con fans, familias, foodies y comunidades enteras.
          </p>
        </div>
        <div className="hp-franq-4col" style={{ position: "relative", display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 18 }}>
          {porque.map((p) => (
            <div key={p.t} className="hp-card" style={{ position: "relative", border: "1px solid var(--color-border)", borderTop: `2px solid ${p.color}`, borderRadius: "var(--radius-lg)", padding: "30px 20px 24px", background: "rgba(14,14,14,.6)", textAlign: "center" }}>
              <span style={{ display: "grid", placeItems: "center", width: p.badge || 58, height: p.badge || 58, margin: "0 auto 16px", borderRadius: "50%", border: `1.5px solid ${p.color}`, boxShadow: `0 0 18px ${p.color === "var(--hp-yellow)" ? "rgba(255,212,0,.3)" : "rgba(255,49,49,.3)"}` }}>
                <p.Icon size={p.size || 26} color={p.color} />
              </span>
              <h3 style={{ fontFamily: "var(--font-display)", fontSize: 17, color: "#fff", textTransform: "uppercase", margin: "0 0 8px" }}>{p.t}</h3>
              <p style={{ fontFamily: "var(--font-body)", fontSize: 13.5, color: "var(--hp-gray)", lineHeight: 1.5, margin: 0 }}>{p.d}</p>
            </div>
          ))}
        </div>
      </section>

      {/* 4. RESULTADOS QUE RESPALDAN */}
      <section style={{ padding: "20px 6vw 60px", maxWidth: 1200, margin: "0 auto" }}>
        <div style={{ borderRadius: "var(--radius-lg)", background: "#0a0a0a", border: "1px solid var(--hp-yellow)", padding: "50px 6vw", textAlign: "center" }}>
          <div style={{ fontFamily: "var(--font-body)", fontWeight: 800, fontSize: 12, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--hp-yellow)", marginBottom: 6 }}>Resultados que respaldan</div>
          <NeonHeading color="white" size="display" as="h2" style={{ marginBottom: 14 }}>Una marca que ya <span style={{ color: "var(--hp-yellow)", textShadow: "var(--glow-yellow)" }}>genera fila</span></NeonHeading>
          <p style={{ fontFamily: "var(--font-body)", fontSize: 15.5, color: "var(--hp-gray)", maxWidth: 760, margin: "0 auto 40px", lineHeight: 1.6 }}>
            Antes de llegar a México, Hot Perrote creció en Madrid con presencia en locales, foodtrucks, eventos y puntos estratégicos. La marca ha demostrado funcionar en contextos de alto tráfico: partidos, conciertos, festivales y zonas urbanas.
          </p>
          <div className="hp-franq-4col" style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 20 }}>
            {metrics.map((m) => (
              <div key={m.d}>
                <div style={{ fontFamily: "var(--font-display)", fontSize: "clamp(30px,3.4vw,44px)", color: "var(--hp-yellow)", textShadow: "var(--glow-yellow)" }}>{m.n}</div>
                <div style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "#fff", opacity: .85, textTransform: "uppercase", letterSpacing: ".03em", marginTop: 4 }}>{m.d}</div>
              </div>
            ))}
          </div>
          <div style={{ fontFamily: "var(--font-body)", fontSize: 11.5, color: "var(--hp-gray)", opacity: .7, marginTop: 30 }}>Cifras de operación y comunicación de Hot Perrote España.</div>
        </div>
      </section>

      {/* 5. EXPANSIÓN EN MÉXICO */}
      <section style={{ padding: "20px 6vw 60px", maxWidth: 1200, margin: "0 auto" }}>
        <div className="hp-franq-mx" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40, alignItems: "center" }}>
          <div>
            <div style={{ fontFamily: "var(--font-body)", fontWeight: 800, fontSize: 12, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--hp-red)", marginBottom: 6 }}>Expansión en México</div>
            <NeonHeading color="white" size="display" as="h2" style={{ marginBottom: 14 }}>México es <span style={{ color: "var(--hp-red)", textShadow: "var(--glow-red)" }}>territorio perrote</span></NeonHeading>
            <p style={{ fontFamily: "var(--font-body)", fontSize: 15.5, color: "var(--hp-gray)", lineHeight: 1.65, margin: "0 0 16px" }}>
              México tiene todo para hacer crecer Hot Perrote: cultura de estadio, eventos masivos, vida nocturna, plazas con alto flujo y un público que busca comida rápida, rica y con personalidad.
            </p>
            <p style={{ fontFamily: "var(--font-body)", fontSize: 15.5, color: "var(--hp-gray)", lineHeight: 1.65, margin: "0 0 16px" }}>
              La expansión inicia en el <b style={{ color: "#fff" }}>Estadio Alfredo Harp Helú</b>, casa de los Diablos Rojos de México, y continúa con próximas aperturas en ciudades y sedes estratégicas.
            </p>
            <p style={{ fontFamily: "var(--font-body)", fontSize: 15.5, color: "#fff", borderLeft: "3px solid var(--hp-yellow)", paddingLeft: 14, margin: 0 }}>
              No estamos vendiendo solo hot dogs. Estamos construyendo <b style={{ color: "var(--hp-yellow)" }}>puntos de encuentro</b> para vivir el antojo, el partido y la experiencia completa.
            </p>
          </div>
          <div style={{ position: "relative", borderRadius: "var(--radius-lg)", overflow: "hidden", border: "1px solid var(--color-border)", aspectRatio: "4/3" }}>
            <img src="../../assets/sucursal/rico-expansion.webp" alt="Fans disfrutando un Hot Perrote en el estadio" 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,.75) 0%, transparent 45%)" }} />
            <div style={{ position: "absolute", left: 16, right: 16, bottom: 16, display: "flex", alignItems: "center", gap: 8 }}>
              <span className="hp-pulse" style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--hp-red)", flexShrink: 0 }} />
              <span style={{ fontFamily: "var(--font-display)", fontSize: 13, color: "#fff", textTransform: "uppercase", lineHeight: 1.2 }}>Estadio Alfredo Harp Helú — primera sede activa</span>
            </div>
          </div>
        </div>
      </section>

      {/* 6. FORMATOS */}
      <section style={{ padding: "20px 6vw 60px", maxWidth: 1200, margin: "0 auto" }}>
        <div style={{ textAlign: "center", fontFamily: "var(--font-body)", fontWeight: 800, fontSize: 12, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--hp-yellow)", marginBottom: 6 }}>Formatos</div>
        <NeonHeading color="white" size="display" as="h2" style={{ textAlign: "center", marginBottom: 40 }}>Un mismo sistema, <span style={{ color: "var(--hp-yellow)", textShadow: "var(--glow-yellow)" }}>varias formas de crecer</span></NeonHeading>
        <div className="hp-franq-4col" style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 18 }}>
          {formatos.map((f) => (
            <div key={f.t} className="hp-card" style={{ border: "1px solid var(--color-border)", borderRadius: "var(--radius-lg)", padding: "26px 20px", background: "rgba(14,14,14,.6)" }}>
              <f.Icon size={30} color="var(--hp-yellow)" />
              <h3 style={{ fontFamily: "var(--font-display)", fontSize: 17, color: "#fff", textTransform: "uppercase", margin: "14px 0 8px" }}>{f.t}</h3>
              <p style={{ fontFamily: "var(--font-body)", fontSize: 13.5, color: "var(--hp-gray)", lineHeight: 1.5, margin: 0 }}>{f.d}</p>
            </div>
          ))}
        </div>
      </section>

      {/* 7. SOPORTE */}
      <section style={{ padding: "20px 6vw 60px", maxWidth: 1000, 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 }}>Soporte</div>
        <NeonHeading color="white" size="display" as="h2" style={{ textAlign: "center", marginBottom: 14 }}>Te damos el <span style={{ color: "var(--hp-red)", textShadow: "var(--glow-red)" }}>playbook perrote</span></NeonHeading>
        <p style={{ textAlign: "center", fontFamily: "var(--font-body)", fontSize: 15.5, color: "var(--hp-gray)", maxWidth: 680, margin: "0 auto 34px", lineHeight: 1.6 }}>
          Cada franquiciado se integra a un sistema diseñado para operar con claridad, mantener la calidad del producto y crecer con respaldo de marca.
        </p>
        <div className="hp-franq-checklist" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "14px 24px" }}>
          {soporte.map((s) => (
            <div key={s} style={{ display: "flex", alignItems: "center", gap: 10, border: "1px solid var(--color-border)", borderRadius: "var(--radius-md)", padding: "12px 16px", background: "rgba(14,14,14,.5)" }}>
              <Icon name="check" size={16} color="var(--hp-yellow)" />
              <span style={{ fontFamily: "var(--font-body)", fontWeight: 700, fontSize: 14, color: "#fff" }}>{s}</span>
            </div>
          ))}
        </div>
      </section>

      {/* 8. FORMULARIO — fondo a todo lo ancho con la mascota conquistando México */}
      <div style={{ position: "relative", width: "100vw", marginLeft: "calc(50% - 50vw)", marginTop: 30, overflow: "hidden", background: "#050505" }}>
        <img src="../../assets/ambiance/hero-formulario.webp" 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: "radial-gradient(60% 70% at 50% 50%, rgba(5,5,5,.55) 0%, transparent 60%)" }} />
        <section ref={formRef} style={{ position: "relative", padding: "70px 6vw", maxWidth: 700, margin: "0 auto" }}>
          <div style={{ textAlign: "center", fontFamily: "var(--font-body)", fontWeight: 800, fontSize: 12, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--hp-yellow)", marginBottom: 16 }}>Formulario</div>
          <div style={{ background: "rgba(8,8,8,.88)", border: "1px solid var(--hp-yellow)", borderRadius: "var(--radius-lg)", padding: 36, backdropFilter: "blur(3px)" }}>
            <FranquiciaForm />
          </div>
        </section>
      </div>

      {/* 9. CIERRE — CTA */}
      <section style={{ padding: "20px 6vw 70px", 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 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: "50px 40px", textAlign: "center" }}>
          <NeonHeading color="white" size="display" as="h2" style={{ margin: 0 }}>La próxima sede puede estar <span style={{ color: "var(--hp-yellow)", textShadow: "var(--glow-yellow)" }}>en tu ciudad</span></NeonHeading>
          <div style={{ marginTop: 26 }}>
            <Button variant="primary" size="lg" onClick={scrollToForm}>Quiero información de franquicia →</Button>
          </div>
        </div>
      </section>
    </>
  );
}

function Contacto() {
  const { sent, submit } = useForm("contacto", "Nuevo mensaje — Contacto Hot Perrote");
  return (
    <div style={{ position: "relative", width: "100vw", marginLeft: "calc(50% - 50vw)", overflow: "hidden", background: "#050505" }}>
      <img src="../../assets/ambiance/brick-contacto.webp" 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: "radial-gradient(70% 80% at 50% 40%, rgba(5,5,5,.72) 0%, rgba(5,5,5,.92) 100%)" }} />
      <section data-screen-label="Contacto" style={{ position: "relative", padding: "72px 6vw", maxWidth: 900, margin: "0 auto", textAlign: "center" }}>
        <NeonHeading color="yellow" size="display" as="h2">Contacto</NeonHeading>
        <p style={{ fontFamily: "var(--font-body)", fontSize: 17, color: "var(--hp-gray)", margin: "10px 0 28px" }}>
          ¿Dudas, prensa o colaboraciones? Escríbenos.
        </p>
        {!sent ? (
          <form className="hp-contact-form" onSubmit={submit} style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14, textAlign: "left", maxWidth: 620, margin: "0 auto" }}>
            <Input name="nombre" label="Nombre" required />
            <Input name="email" label="Correo" type="email" required />
            <div style={{ gridColumn: "1 / -1" }}>
              <Input name="tel" label="Teléfono" type="tel" placeholder="55 0000 0000" />
            </div>
            <div style={{ gridColumn: "1 / -1" }}>
              <label style={{ fontFamily: "var(--font-body)", fontWeight: 700, fontSize: 12, textTransform: "uppercase", letterSpacing: ".06em", color: "var(--hp-gray)" }}>Mensaje</label>
              <textarea name="mensaje" rows="4" required style={{
                width: "100%", marginTop: 6, boxSizing: "border-box", fontFamily: "var(--font-body)", fontSize: 16, color: "#fff",
                background: "var(--hp-ink-800)", border: "2px solid var(--color-border)", borderRadius: "var(--radius-sm)", padding: "12px 14px", outline: "none", resize: "vertical",
              }} />
            </div>
            <div style={{ gridColumn: "1 / -1", display: "flex", justifyContent: "center", marginTop: 4 }}>
              <Button variant="primary" size="lg" type="submit">Enviar</Button>
            </div>
          </form>
        ) : (
          <div style={{ padding: "30px 10px" }}>
            <FlameAccent size={56} color="var(--hp-red)" style={{ margin: "0 auto 10px" }} />
            <h3 style={{ fontFamily: "var(--font-display)", fontSize: 26, color: "var(--hp-yellow)", textTransform: "uppercase" }}>¡Mensaje enviado!</h3>
            <p style={{ fontFamily: "var(--font-body)", color: "#fff", opacity: .85 }}>Te responderemos lo antes posible.</p>
          </div>
        )}
        <div style={{ marginTop: 34, fontFamily: "var(--font-body)", color: "var(--hp-gray)", fontSize: 14 }}>
          Síguenos{" "}
          <a href="https://www.instagram.com/hotperrotemx/" target="_blank" rel="noopener noreferrer" style={{ color: "#fff", fontWeight: 700, textDecoration: "none" }}>@hotperrotemx</a>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { HPBottom: { Club, Franquicias, Contacto } });