// NICO landing (v2) — all sections. Lean markup; styling in nico.css.
(function () {
  const I = (name, size, color) => React.createElement(window.Icon || "span", { name, size: size || 18, color });
  const logo = () => (window.__resources && window.__resources.logo) || "assets/nico-logo.png";
  const R = (window.__resources || {});
  const PH = {
    woman: R.phWoman || "assets/ph-woman.jpg",
    neon: R.phNeon || "assets/ph-neon.jpg",
    highfive: R.phHighfive || "assets/ph-highfive.jpg",
    overload: R.phOverload || "assets/ph-overload.jpg",
    man: R.phMan || "assets/ph-man.jpg",
    programmer: "assets/ph-programmer.jpg",
    meta: R.metaLogo || "assets/meta-logo.png",
  };

  // Neutral portrait placeholder — swap for a real <img> or drop a photo later.
  function Portrait({ size = 64, shape = "circle", src, alt }) {
    if (src) {
      return <img className="portrait-img" data-shape={shape} src={src} alt={alt || ""} loading="lazy" style={{ width: size, height: size }} />;
    }
    return (
      <span className="portrait" data-shape={shape} style={{ width: size, height: size }}>
        {I("user-round", Math.round(size * 0.48))}
      </span>
    );
  }

  // ---------------------------------------------------------------- NAV
  function Nav({ onDemo }) {
    return (
      <header className="nav">
        <img src={logo()} alt="NICO" style={{ height: 28, width: "auto" }} />
        <nav className="nav-links">
          <a href="#producto">Producto</a>
          <a href="#como">Cómo funciona</a>
          <a href="#mensajes">Casos</a>
          <a href="#" className="btn btn-grad" onClick={(e) => { e.preventDefault(); onDemo(); }}>
            Diagnóstico {I("arrow-right", 16)}
          </a>
        </nav>
      </header>
    );
  }

  // ---------------------------------------------------------------- HERO
  function Hero({ onDemo }) {
    return (
      <section className="hero">
        <div className="wrap hero-grid">
          <div className="stack-lg">
            <span className="hero-tag reveal">{I("message-circle", 16, "var(--nico-success)")} WhatsApp-first · CRM · voz · juntas · pauta</span>
            <h1 className="display reveal" style={{ "--i": 1 }}>
              No es un chatbot.<br /><span className="grad">Es un sistema de ventas.</span>
            </h1>
            <p className="lead reveal" style={{ "--i": 2, maxWidth: "44ch" }}>
              Tus leads se pierden entre WhatsApp, vendedores, juntas y CRM. Nico conecta
              todo ese recorrido y mueve cada oportunidad al siguiente paso.
            </p>
            <div className="row reveal" style={{ "--i": 3 }}>
              <button className="btn btn-grad btn-lg" onClick={onDemo}>Agendar diagnóstico {I("arrow-right", 20)}</button>
              <button className="btn btn-ghost btn-lg" onClick={() => { const v = document.getElementById("video"); if (v) v.scrollIntoView({ behavior: "smooth", block: "start" }); }}>{I("play", 17)} Ver cómo funciona</button>
            </div>
            <div className="cred-row reveal" style={{ "--i": 4 }}>
              {["Respuesta rápida", "24/7", "WhatsApp + voz", "CRM conectado", "Equipo informado"].map((t) => (
                <span key={t}>{I("check", 14, "var(--nico-violet)")} {t}</span>
              ))}
            </div>
            <div className="meta-badge reveal" style={{ "--i": 6 }}>
              {I("shield-check", 15, "var(--nico-success)")} API oficial de WhatsApp Business
              <span className="meta-sep"></span>
              <img src={PH.meta} alt="Meta" className="meta-logo" />
            </div>
            <p className="hero-eco reveal" style={{ "--i": 7 }}>
              Una solución de B2Boost, la unidad de sistemas comerciales de Sindicato, dentro del ecosistema Peltier Group.
            </p>
          </div>
          <div className="hero-orbit-cell">
            <BigOrbit size={560} />
            <div className="hero-portrait-chip reveal" style={{ "--i": 3 }}>
              <span style={{ position: "relative", display: "inline-flex" }}>
                <Portrait size={40} src={PH.woman} />
                <span style={{ position: "absolute", right: -1, bottom: -1, width: 11, height: 11, borderRadius: "50%", background: "var(--nico-success)", border: "2px solid #fff" }} />
              </span>
              <div style={{ display: "flex", flexDirection: "column", lineHeight: 1.2 }}>
                <span style={{ fontSize: "var(--fs-sm)", fontWeight: "var(--fw-semibold)" }}>María</span>
                <span style={{ fontSize: "var(--fs-micro)", color: "var(--nico-success)" }}>En seguimiento</span>
              </div>
            </div>
          </div>
        </div>
        <a href="#producto" className="scrollcue"><i></i>Desliza</a>
      </section>
    );
  }

  // ------------------------------------------------------------- PROBLEM
  function Problem() {
    const rows = [
      { n: "01", t: <>Pagas por leads que <b>nadie alcanza a contestar</b>.</> },
      { n: "02", t: <>Tu pauta optimiza registros, <b>no oportunidades reales</b>.</> },
      { n: "03", t: <>El prospecto muestra interés, pero <b>nadie retoma a tiempo</b>.</> },
      { n: "04", t: <>El seguimiento depende de que alguien <b>se acuerde</b>.</> },
    ];
    return (
      <section id="producto" className="sec problem">
        <div className="wrap">
          <span className="eyebrow reveal">El problema</span>
          <h2 className="h-xl reveal" style={{ "--i": 1, marginTop: 18, maxWidth: "18ch" }}>
            Tu pauta no termina en el lead. <span className="grad">Ahí empieza lo que se rompe.</span>
          </h2>
          <div className="problem-grid">
            <div className="bleak">
            {rows.map((r, i) => (
              <div className="bleak-row reveal" key={r.n} style={{ "--i": i }}>
                <span className="bleak-num">{r.n}</span>
                <span className="lead" style={{ color: "var(--text-body)", maxWidth: "34ch" }}>{r.t}</span>
              </div>
            ))}
            </div>
            <div className="duo problem-photo reveal" style={{ "--i": 2 }}>
              <img src={PH.overload} alt="Leads sin seguimiento comercial claro" />
            </div>
          </div>
        </div>
      </section>
    );
  }

  // -------------------------------------------------- STACK (piezas juntas)
  function Stack() {
    const flow = [
      ["megaphone", "Anuncio"],
      ["message-circle", "WhatsApp"],
      ["sparkles", "Nico"],
      ["kanban", "CRM"],
      ["phone", "Junta / Llamada"],
      ["repeat", "Seguimiento"],
      ["target", "Pauta aprende"],
    ];
    return (
      <section className="sec sec-tight">
        <div className="wrap">
          <span className="eyebrow reveal">El sistema</span>
          <h2 className="h-xl reveal" style={{ "--i": 1, marginTop: 18, maxWidth: "24ch" }}>
            Las herramientas ya existen. Lo que falta es que <span className="grad">trabajen juntas</span>.
          </h2>
          <p className="lead muted reveal" style={{ "--i": 2, marginTop: 16, maxWidth: "46ch" }}>
            Cada pieza por separado deja que la venta se rompa. Nico las conecta en una sola
            operación con <b style={{ color: "var(--text-strong)" }}>memoria, seguimiento y control</b>.
          </p>
          <div className="stack-flow reveal" style={{ "--i": 3 }}>
            {flow.map(([ic, t], i) => (
              <React.Fragment key={t}>
                <span className="stack-node" data-hl={t === "Nico" ? "" : undefined}>
                  {I(ic, 17, t === "Nico" ? "#fff" : "var(--nico-violet)")} {t}
                </span>
                {i < flow.length - 1 && <span className="stack-arrow">{I("arrow-right", 16)}</span>}
              </React.Fragment>
            ))}
          </div>
        </div>
      </section>
    );
  }

  // --------------------------------------------------------------- SHIFT
  function Shift() {
    return (
      <section className="sec sec-tight">
        <div className="wrap split split-wide">
          <div className="stack-md">
            <span className="eyebrow reveal">El cambio</span>
            <h2 className="h-lg reveal" style={{ "--i": 1 }}>
              Inteligencia comercial que vive <span className="grad">donde tu cliente escribe y donde tu equipo opera</span>.
            </h2>
            <p className="lead reveal" style={{ "--i": 2, maxWidth: "42ch" }}>
              Conversaciones externas y operación interna sobre la misma memoria comercial.
            </p>
            <div className="chan-row reveal" style={{ "--i": 3 }}>
              {[["message-circle", "WhatsApp"], ["kanban", "CRM"], ["phone", "Voz"], ["video", "Juntas"], ["hash", "Slack"], ["target", "Pauta"]].map(([ic, t]) => (
                <span key={t}>{I(ic, 15, "var(--nico-violet)")} {t}</span>
              ))}
            </div>
          </div>
          <div className="reveal" style={{ "--i": 1 }}>
            <ChatProof />
          </div>
        </div>
      </section>
    );
  }

  function ChatProof() {
    const bubble = (nico, text) => (
      <div style={{ display: "flex", justifyContent: nico ? "flex-end" : "flex-start" }}>
        <div style={{
          maxWidth: "82%", padding: "11px 15px", borderRadius: 18,
          borderBottomRightRadius: nico ? 5 : 18, borderBottomLeftRadius: nico ? 18 : 5,
          background: nico ? "var(--nico-gradient-135)" : "var(--surface-card)",
          color: nico ? "#fff" : "var(--text-strong)",
          border: nico ? "none" : "1px solid var(--border-hairline)",
          boxShadow: nico ? "var(--glow-soft)" : "var(--shadow-xs)",
          fontSize: "var(--fs-sm)", lineHeight: 1.45,
        }}>{text}</div>
      </div>
    );
    return (
      <div style={{
        background: "linear-gradient(180deg,#fff,#FBFAFF)", borderRadius: "var(--radius-xl)",
        border: "1px solid var(--border-hairline)", boxShadow: "var(--shadow-lg)", padding: 22,
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 11, marginBottom: 16 }}>
          <span style={{ position: "relative", display: "inline-flex" }}>
            <Portrait size={36} src={PH.woman} />
            <span style={{ position: "absolute", right: -1, bottom: -1, width: 11, height: 11, borderRadius: "50%", background: "var(--nico-success)", border: "2px solid #fff" }} />
          </span>
          <div style={{ display: "flex", flexDirection: "column", lineHeight: 1.25 }}>
            <span style={{ fontSize: "var(--fs-sm)", fontWeight: "var(--fw-semibold)" }}>María</span>
            <span style={{ fontSize: "var(--fs-micro)", color: "var(--text-muted)" }}>WhatsApp · en línea</span>
          </div>
          <span style={{ marginLeft: "auto", fontSize: "var(--fs-micro)", color: "var(--text-muted)" }}>Anuncio · Citas</span>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          {bubble(false, "Hola, vi su anuncio. ¿Tienen cita esta semana?")}
          {bubble(true, "¡Hola María! Sí. ¿Buscas algo en particular?")}
          {bubble(false, "Una limpieza facial.")}
          {bubble(true, "Tengo jueves 14:00 o viernes 11:00. ¿Cuál te acomoda? 🙌")}
        </div>
        <div style={{
          display: "flex", alignItems: "center", gap: 10, marginTop: 16, padding: "11px 13px",
          background: "var(--nico-violet-tint)", borderRadius: "var(--radius-md)",
        }}>
          {I("sparkles", 16, "var(--nico-violet)")}
          <span style={{ fontSize: "var(--fs-sm)", color: "var(--nico-ink)", fontWeight: "var(--fw-medium)" }}>Nico agendó la cita, actualizó el CRM y dejó el siguiente paso visible para el equipo.</span>
        </div>
      </div>
    );
  }

  // -------------------------------------------------------- HOW IT WORKS
  function HowItWorks() {
    const steps = [
      { n: "01", k: "Responde", t: "Responde", h: <>Contesta rápido y <span className="grad-on">con contexto</span>.</>, p: "A cualquier hora, sin que alguien tenga que estar en el chat." },
      { n: "02", k: "Precalifica", t: "Precalifica", h: <>Detecta intención, fit y <span className="grad-on">urgencia</span>.</>, p: "Prioriza a quien tiene más probabilidad de avanzar." },
      { n: "03", k: "Agenda", t: "Agenda citas", h: <>Propone, confirma y <span className="grad-on">deja registrada</span>.</>, p: "Ofrece horarios, confirma y recuerda. Menos ausencias." },
      { n: "04", k: "CRM", t: "Registra en CRM", h: <>Alimenta la <span className="grad-on">memoria comercial</span>.</>, p: "Datos, intención, fuente, etapa y siguiente paso." },
      { n: "05", k: "Seguimiento", t: "Da seguimiento", h: <>Retoma con <span className="grad-on">cadencia controlada</span>.</>, p: "Retoma lo abierto y escala cuando hace falta un humano." },
      { n: "06", k: "Aprende", t: "Aprende y mejora", h: <>Aprende y <span className="grad-on">mejora su criterio</span>.</>, p: "De cada conversación, corrección y resultado." },
      { n: "07", k: "Reporta", t: "Reporta al equipo", h: <>Mantiene al equipo <span className="grad-on">al día</span>.</>, p: "Avisa pendientes, leads atorados y qué atender primero." },
    ];
    return (
      <section id="como" className="sec how">
        <div className="wrap">
          <div style={{ marginBottom: 20 }}>
            <span className="eyebrow reveal">Cómo funciona</span>
            <h2 className="h-xl reveal" style={{ "--i": 1, marginTop: 16, maxWidth: "22ch" }}>
              Del primer mensaje al <span className="grad">siguiente paso comercial</span>.
            </h2>
          </div>
          <div className="how-grid">
            <div className="how-sticky">
              <div className="how-stage">
                <BigOrbit size={420} />
                <div className="how-label">
                  <div className="lk"></div>
                  <div className="lt"></div>
                </div>
              </div>
            </div>
            <div className="steps">
              {steps.map((s) => (
                <div className="step" key={s.n} data-k={s.k} data-t={s.t}>
                  <div className="step-n">{s.n} — {s.k}</div>
                  <h3>{s.h}</h3>
                  <p>{s.p}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    );
  }

  // ------------------------------------------------------------ MESSAGES
  function Messages() {
    const msgs = [
      { tag: "Paid media", dolor: "Estás pagando leads que se enfrían.", promesa: "Nico responde, precalifica y registra cada oportunidad." },
      { tag: "Performance", dolor: "Tu pauta termina en un formulario.", promesa: "Nico ayuda a distinguir qué campañas generan oportunidades reales, no solo registros." },
      { tag: "Ecommerce", dolor: "Tu carrito termina en abandono.", promesa: "Nico retoma la conversación, resuelve dudas y recupera intención de compra." },
    ];
    return (
      <section id="mensajes" className="sec">
        <div className="wrap">
          <span className="eyebrow reveal">El sistema de mensajes</span>
          <h2 className="h-xl reveal" style={{ "--i": 1, marginTop: 16, maxWidth: "24ch" }}>
            Tus anuncios ya traen interés. <span className="grad">Nico lo convierte en siguiente paso.</span>
          </h2>
          <div className="duo msg-photo reveal" style={{ "--i": 1 }}>
            <img src={PH.highfive} alt="Conversaciones que conectan" />
          </div>
          <div className="msg-list">
            {msgs.map((m, i) => (
              <div className={"msg reveal"} key={m.tag} style={{ "--i": i }}>
                <div>
                  <span className="tag">{m.tag}</span>
                  <div className="dolor">{m.dolor}</div>
                </div>
                <div className="arrow">{I("arrow-right", 20)}</div>
                <div className="promesa-side">
                  <div className="promesa grad">{m.promesa}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  // ---------------------------------------------------------------- LOOP
  function Loop() {
    return (
      <section className="sec sec-tight">
        <div className="wrap">
          <div className="loop-card split split-wide reveal">
            <div className="stack-md">
              <span className="eyebrow">El loop que mejora tu operación</span>
              <h2 className="h-lg">
                Cada conversación deja contexto.<br /><span className="grad">Cada contexto mejora la siguiente decisión.</span>
              </h2>
              <p className="lead muted" style={{ maxWidth: "44ch" }}>
                Nico identifica qué genera interés, qué frena la venta, qué campaña trae mejores oportunidades
                y qué seguimiento convierte mejor. Esa información vuelve a tu operación comercial y a tu pauta.
              </p>
              <div className="row" style={{ gap: 10 }}>
                {["Quién avanza", "Qué objeta", "Qué campaña trae calidad"].map((t) => (
                  <span key={t} style={{
                    fontSize: "var(--fs-sm)", fontWeight: "var(--fw-medium)", color: "var(--text-body)",
                    padding: "8px 14px", borderRadius: "var(--radius-pill)",
                    background: "var(--surface-card)", border: "1px solid var(--border-hairline)", boxShadow: "var(--shadow-xs)",
                  }}>{t}</span>
                ))}
              </div>
            </div>
            <div style={{ display: "grid", placeItems: "center", minHeight: 280 }}>
              <BigOrbit size={300} />
            </div>
          </div>
        </div>
      </section>
    );
  }

  // -------------------------------------------------------------- IMPACT
  function Impact() {
    const items = [
      { big: "24/7", cap: "Atención rápida, también fuera de horario." },
      { big: "↓", cap: "Menos leads sin respuesta. Cada lead entra a un flujo de atención, seguimiento o descarte." },
      { big: "1", cap: "Una operación conectada: responder, calificar, agendar, registrar, seguir, reportar y aprender." },
    ];
    return (
      <section className="sec">
        <div className="wrap">
          <span className="eyebrow reveal">Lo que cambia</span>
          <h2 className="h-xl reveal" style={{ "--i": 1, marginTop: 16, maxWidth: "22ch" }}>
            Una operación comercial con <span className="grad">menos fugas</span>.
          </h2>
          <div className="impact-grid">
            {items.map((it, i) => (
              <div className="impact reveal" key={i} style={{ "--i": i }}>
                <div className="big">{it.big}</div>
                <p className="cap">{it.cap}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  // ----------------------------------------------------- ECOSISTEMA
  function Ecosystem() {
    const cards = [
      { k: "Peltier Group", d: "Ecosistema de comunicación, negocio y soluciones comerciales.", href: "https://peltiermkt.com/" },
      { k: "Sindicato", d: "Agencia de medios, performance y criterio de resultados.", href: "https://sindicato.agency/" },
      { k: "B2Boost", d: "Unidad de Sindicato enfocada en CRM, automatización, pauta, seguimiento y sistemas comerciales.", href: "https://sindicato.agency/" },
      { k: "Nico", d: "Sistema de orquestación comercial con IA para WhatsApp, CRM, voz, juntas, pauta y equipo interno.", href: null },
    ];
    return (
      <section className="sec eco">
        <div className="wrap">
          <span className="eyebrow reveal">Ecosistema</span>
          <h2 className="h-xl reveal" style={{ "--i": 1, marginTop: 16, maxWidth: "22ch" }}>
            Parte del ecosistema <span className="grad">Peltier Group</span>.
          </h2>
          <p className="lead muted reveal" style={{ "--i": 2, marginTop: 14, maxWidth: "64ch" }}>
            Nico nace dentro de B2Boost, la unidad de sistemas comerciales de Sindicato, parte del ecosistema
            Peltier Group. Integra experiencia en medios, performance, automatización, CRM y operación comercial
            para convertir conversaciones, llamadas y juntas en oportunidades con seguimiento.
          </p>
          <div className="eco-grid reveal" style={{ "--i": 3 }}>
            {cards.map((c, i) => (
              <div className="eco-card" key={c.k} data-self={c.href ? undefined : ""}>
                <div className="eco-step">{String(i + 1).padStart(2, "0")}</div>
                <h4 className="eco-k">{c.k}</h4>
                <p className="eco-d">{c.d}</p>
                {c.href
                  ? <a className="eco-link" href={c.href} target="_blank" rel="noopener noreferrer">Conocer {I("arrow-up-right", 15)}</a>
                  : <span className="eco-link eco-here">Estás aquí</span>}
              </div>
            ))}
          </div>
          <p className="lead reveal" style={{ "--i": 4, marginTop: 24, maxWidth: "64ch", color: "var(--text-body)", fontWeight: "var(--fw-medium)" }}>
            No es una herramienta suelta. Es una solución construida desde un ecosistema que entiende
            comunicación, adquisición, operación comercial y resultados.
          </p>
        </div>
      </section>
    );
  }

  // ----------------------------------------------------------------- CTA
  function CtaFinal({ onDemo }) {
    return (
      <section className="sec sec-tight">
        <div className="wrap">
          <div className="cta-card reveal">
            <div className="stack-md">
              <h2 className="h-xl" style={{ lineHeight: 1.02 }}>
                Te hacemos un <span className="grad">diagnóstico de fuga comercial</span>.
              </h2>
              <p className="lead" style={{ color: "var(--text-body)", maxWidth: "46ch" }}>
                En 20 minutos revisamos dónde se pierden tus oportunidades: WhatsApp, CRM, pauta,
                llamadas, juntas o seguimiento. Después te mostramos cómo se vería Nico conectado a tu operación.
              </p>
              <div className="row">
                <button className="btn btn-grad btn-lg" onClick={onDemo}>Agendar diagnóstico {I("arrow-right", 20)}</button>
                <button className="btn btn-ghost btn-lg">Hablar con ventas</button>
              </div>
            </div>
            <div className="cta-orbit" style={{ display: "grid", placeItems: "center" }}>
              <BigOrbit size={260} />
            </div>
          </div>
        </div>
      </section>
    );
  }

  // -------------------------------------------------------------- FOOTER
  function Footer() {
    const cols = [
      { h: "Producto", links: [["Cómo funciona", "#como"], ["Capacidades", "#producto"], ["Integraciones", "#producto"], ["Diagnóstico", "#"]] },
      { h: "Casos", links: [["Citas", "#mensajes"], ["Cotizaciones", "#mensajes"], ["Ecommerce", "#mensajes"], ["Paid media", "#mensajes"], ["B2B", "#mensajes"]] },
      { h: "Ecosistema", links: [["Peltier Group", "https://peltiermkt.com/"], ["Sindicato", "https://sindicato.agency/"], ["Contacto", "#"]] },
    ];
    return (
      <footer className="foot">
        <div className="wrap">
          <div className="foot-grid">
            <div>
              <img src={logo()} alt="NICO" style={{ height: 26 }} />
              <p className="muted" style={{ fontSize: "var(--fs-sm)", marginTop: 16, maxWidth: "34ch", lineHeight: "var(--lh-normal)" }}>
                Nico conecta WhatsApp, CRM, pauta, voz, juntas y equipo interno en una operación comercial con memoria.
              </p>
              <p className="muted" style={{ fontSize: "var(--fs-micro)", marginTop: 10, maxWidth: "34ch", lineHeight: "var(--lh-normal)" }}>
                Nico es una solución de B2Boost, unidad de sistemas comerciales de Sindicato, dentro del ecosistema Peltier Group.
              </p>
              <div className="foot-meta">
                {I("shield-check", 14, "var(--nico-success)")} <span>Plataforma oficial</span>
                <img src={PH.meta} alt="Meta" />
              </div>
            </div>
            {cols.map((c) => (
              <div className="foot-col" key={c.h}>
                <h4>{c.h}</h4>
                {c.links.map(([label, href]) => {
                  const ext = href && href.startsWith("http");
                  return <a href={href} key={label} {...(ext ? { target: "_blank", rel: "noopener noreferrer" } : {})}>{label}</a>;
                })}
              </div>
            ))}
          </div>
          <div className="foot-base">
            <span>© 2026 NICO · Inteligencia Comercial</span>
            <span>Familia Peltier · Sindicato</span>
          </div>
        </div>
      </footer>
    );
  }

  // ---------------------------------------------------------------- HUMAN
  function Human() {
    return (
      <section className="sec-tight">
        <div className="wrap split" style={{ alignItems: "center" }}>
          <div className="stack-md">
            <span className="eyebrow reveal">Personas reales</span>
            <h2 className="h-lg reveal" style={{ "--i": 1 }}>
              Detrás de cada conversación, <span className="grad">una persona esperando respuesta</span>.
            </h2>
            <p className="lead muted reveal" style={{ "--i": 2, maxWidth: "40ch" }}>
              Como un sistema comercial atento: rápido, con contexto y con el equipo listo para
              intervenir cuando hace falta.
            </p>
          </div>
          <div className="reveal" style={{ "--i": 1, justifySelf: "end", textAlign: "right" }}>
            <div className="avatars-row">
              {[PH.woman, PH.neon, PH.man, PH.highfive].map((src, i) => <Portrait key={i} size={72} src={src} />)}
            </div>
            <p className="muted" style={{ fontSize: "var(--fs-sm)", marginTop: 16, display: "inline-flex", alignItems: "center", gap: 7 }}>
              {I("users", 15, "var(--nico-violet)")} Cada conversación, una oportunidad atendida con criterio
            </p>
          </div>
        </div>
      </section>
    );
  }

  // ---------------------------------------------------------------- VIDEO FILM
  function VideoFilm() {
    return (
      <section className="sec-tight film" id="video">
        <div className="wrap">
          <div className="film-head">
            <span className="eyebrow reveal">Míralo en 45 segundos</span>
            <h2 className="h-lg reveal" style={{ "--i": 1, maxWidth: "26ch" }}>
              Así trabaja Nico cuando tu equipo <span className="grad">no puede estar encima de cada lead</span>.
            </h2>
          </div>
          <div className="film-frame reveal" style={{ "--i": 2 }}>
            <video
              controls
              playsInline
              preload="metadata"
              poster="assets/nico-explainer-poster.jpg"
              style={{ width: "100%", height: "100%", display: "block", borderRadius: "inherit", objectFit: "cover" }}
            >
              <source src="assets/nico-explainer-h264.mp4" type="video/mp4" />
              Tu navegador no soporta el video.
            </video>
          </div>
        </div>
      </section>
    );
  }

  Object.assign(window, { Nav, Hero, Problem, Stack, Shift, Human, HowItWorks, Messages, Loop, Impact, Ecosystem, CtaFinal, Footer, VideoFilm });
})();