// NICO landing — added sections: CRM flow (wow), Voz, Diferenciadores, Para quién.
(function () {
  const I = (name, size, color) => React.createElement(window.Icon || "span", { name, size: size || 18, color });

  // ----------------------------------------------- CRM FLOW (the wow moment)
  const COLS = ["Nuevo", "En conversación", "Calificado", "Siguiente paso"];
  const CHAT = [
    { who: "lead", t: "Hola, vi su anuncio de limpieza dental." },
    { who: "nico", t: "¡Hola Eduardo! Con gusto. ¿Buscas limpieza o blanqueamiento?" },
    { who: "lead", t: "Limpieza, esta semana si se puede." },
    { who: "nico", t: "Perfecto. Tengo jueves 16:00. ¿Te lo aparto? 🙌" },
  ];
  const CARDLINE = [
    "Nuevo lead desde WhatsApp",
    "Nico está calificando intención",
    "Interés y fecha confirmados",
    "Cita sugerida: jueves 16:00 · siguiente paso visible para ventas",
  ];
  const VISIBLE = [1, 2, 3, 4];

  function CrmFlow() {
    const [stage, setStage] = React.useState(0);
    const [metrics, setMetrics] = React.useState({ step: 0, w: 0, stack: false });
    const colsRef = React.useRef(null);
    React.useEffect(() => {
      function measure() {
        const stack = window.innerWidth < 600;
        const cols = colsRef.current && colsRef.current.querySelectorAll(".crm-col");
        if (cols && cols.length > 1) {
          const a = cols[0].getBoundingClientRect(), b = cols[1].getBoundingClientRect();
          setMetrics({ step: b.left - a.left, w: a.width, stack: stack });
        } else { setMetrics((m) => ({ ...m, stack: stack })); }
      }
      measure();
      window.addEventListener("resize", measure);
      const r = setTimeout(measure, 400);
      const reduce = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
      if (reduce) { setStage(3); return () => { window.removeEventListener("resize", measure); clearTimeout(r); }; }
      let s = 0;
      const id = setInterval(() => { s = (s + 1) % 6; setStage(s > 3 ? 3 : s); }, 1650);
      return () => { clearInterval(id); window.removeEventListener("resize", measure); clearTimeout(r); };
    }, []);
    const seen = VISIBLE[stage];
    const cardStyle = metrics.stack ? {} : (metrics.w ? { width: metrics.w, transform: "translateX(" + (metrics.step * stage) + "px)" } : { opacity: 0 });
    return (
      <section className="sec-tight crmflow">
        <div className="wrap">
          <div style={{ maxWidth: "30ch", marginBottom: 22 }}>
            <span className="eyebrow reveal">Así trabaja Nico</span>
            <h2 className="h-lg reveal" style={{ "--i": 1, marginTop: 14 }}>
              De conversación a oportunidad, <span className="grad">con CRM vivo</span>.
            </h2>
            <p className="lead muted reveal" style={{ "--i": 2, marginTop: 14, maxWidth: "44ch" }}>
              Registra cada interacción, califica el interés y <b style={{ color: "var(--text-strong)" }}>mueve la
              oportunidad en el CRM</b>.
            </p>
          </div>

          <div className="crm-split reveal" style={{ "--i": 1 }}>
            {/* mini chat */}
            <div className="crm-chat">
              <div className="crm-chat-h">
                <span className="portrait" style={{ width: 34, height: 34 }}>{I("user-round", 17)}</span>
                <div style={{ display: "flex", flexDirection: "column", lineHeight: 1.2 }}>
                  <span style={{ fontSize: "var(--fs-sm)", fontWeight: "var(--fw-semibold)" }}>Eduardo</span>
                  <span style={{ fontSize: "var(--fs-micro)", color: "var(--text-muted)" }}>WhatsApp · en línea</span>
                </div>
                <span className="crm-live">{I("zap", 13, "var(--nico-violet)")} en vivo</span>
              </div>
              <div className="crm-chat-body">
                {CHAT.slice(0, seen).map((m, i) => (
                  <div className={"crm-bub " + m.who} key={i}>{m.t}</div>
                ))}
              </div>
            </div>

            {/* kanban board */}
            <div className="crm-board">
              <div className="crm-board-h">
                {I("kanban", 16, "var(--nico-violet)")} <span>CRM · Pipeline</span>
                <span className="crm-auto">{I("sparkles", 13, "var(--nico-violet)")} Nico actualiza la oportunidad</span>
              </div>
              <div className="crm-cols" ref={colsRef}>
                {COLS.map((c, i) => (
                  <div className="crm-col" key={c} data-active={stage === i ? "" : undefined}>
                    <div className="crm-col-h"><span className="dot"></span>{c}</div>
                  </div>
                ))}
                <div className="crm-card" style={cardStyle}>
                  <div className="crm-card-top">
                    <span className="portrait" style={{ width: 28, height: 28 }}>{I("user-round", 14)}</span>
                    <div style={{ lineHeight: 1.2 }}>
                      <div style={{ fontSize: "var(--fs-sm)", fontWeight: "var(--fw-semibold)" }}>Eduardo</div>
                      <div style={{ fontSize: "var(--fs-micro)", color: "var(--text-muted)" }}>Clínica dental</div>
                    </div>
                  </div>
                  <div className="crm-card-line">{CARDLINE[stage]}</div>
                  <div className="crm-card-foot">
                    <span className="crm-pill" data-done={stage >= 3 ? "" : undefined}>
                      {stage >= 3 ? I("check", 12) : I("loader", 12)} {COLS[stage]}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  }

  // -------------------------------------------------------------- VOZ
  function Wave() {
    return (
      <div className="soundwave" aria-hidden="true">
        {Array.from({ length: 22 }).map((_, i) => (
          <i key={i} style={{ animationDelay: (i * 0.07).toFixed(2) + "s" }}></i>
        ))}
      </div>
    );
  }
  function Voz() {
    const rows = [
      { k: "Entrantes", icon: "phone-incoming", h: <>Nico atiende llamadas y <span className="grad">captura intención</span>.</>, p: "Una recepcionista comercial que responde, registra, agenda o escala cuando la conversación necesita a una persona. Reduce llamadas perdidas y deja contexto en el CRM." },
      { k: "Salientes", icon: "phone-outgoing", h: <>Nico llama con <span className="grad">un propósito claro</span>.</>, p: "Confirma citas, recupera leads, levanta datos faltantes y activa seguimiento con voz natural, sin depender siempre del equipo comercial." },
    ];
    return (
      <section className="sec voz">
        <div className="wrap">
          <span className="eyebrow reveal">Nico también habla</span>
          <h2 className="h-xl reveal" style={{ "--i": 1, marginTop: 16, maxWidth: "20ch" }}>
            No solo llama. <span className="grad">Llama con contexto.</span>
          </h2>
          <p className="lead muted reveal" style={{ "--i": 2, marginTop: 14, maxWidth: "58ch" }}>
            Nico sabe qué lead está llamando, de qué campaña viene, qué pidió por WhatsApp,
            qué cita tiene pendiente y qué siguiente paso toca registrar en el CRM.
          </p>
          <div className="voz-rows">
            {rows.map((r, i) => (
              <div className="voz-row reveal" key={r.k} style={{ "--i": i }}>
                <div className="voz-text">
                  <span className="voz-kicker">{I(r.icon, 16, "var(--nico-violet)")} {r.k}</span>
                  <h3 className="h-md">{r.h}</h3>
                  <p className="lead muted" style={{ maxWidth: "40ch" }}>{r.p}</p>
                </div>
                <div className="voz-visual">
                  <div className="voz-orb"><BigOrbit size={180} /></div>
                  <Wave />
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  // ----------------------------------------------------- DIFERENCIADORES
  function Difs() {
    const rows = [
      { icon: "target", h: <>Cierra el loop entre <span className="grad">pauta y ventas</span>.</>, p: "Nico conecta campaña, conversación, calificación y avance comercial para entender qué fuentes generan oportunidades reales y qué creativos solo generan ruido." },
      { icon: "brain", h: <>Aprende con <span className="grad">cada interacción y corrección</span>.</>, p: "Identifica objeciones, patrones de intención, calidad de leads y resultados de juntas para mejorar su criterio comercial." },
      { icon: "git-branch", h: <>Convierte tu CRM en <span className="grad">memoria comercial</span>.</>, p: "Nico no solo guarda datos: registra contexto, actualiza etapas, deja siguientes pasos y mantiene visible lo que el equipo necesita atender." },
      { icon: "arrow-left-right", h: <>Trabaja hacia <span className="grad">afuera y hacia adentro</span>.</>, p: "Atiende leads, pero también informa al equipo: alertas, pendientes, gasto de campaña, estado de oportunidades y resúmenes ejecutivos." },
    ];
    return (
      <section className="sec">
        <div className="wrap">
          <span className="eyebrow reveal">Por qué Nico</span>
          <h2 className="h-xl reveal" style={{ "--i": 1, marginTop: 16, maxWidth: "24ch" }}>
            No es otro bot. Es <span className="grad">la capa que conecta tu operación comercial</span>.
          </h2>
          <div className="dif-rows">
            {rows.map((r, i) => (
              <div className="dif-row reveal" key={i} style={{ "--i": i }}>
                <div className="dif-medal">{I(r.icon, 30, "var(--nico-violet)")}</div>
                <div className="dif-text">
                  <h3 className="h-md">{r.h}</h3>
                  <p className="lead muted" style={{ maxWidth: "46ch" }}>{r.p}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  // -------------------------------------------------------- PARA QUIÉN
  function ParaQuien() {
    const rows = [
      { k: "Citas", d: "Clínicas, estética y servicios: agenda, confirma y da seguimiento sin saturar al equipo." },
      { k: "Cotizaciones", d: "Servicios y proyectos: captura datos, entiende necesidad y deja al equipo listo para cotizar mejor." },
      { k: "Ecommerce", d: "Ecommerce de ticket medio o alto: resuelve dudas, recupera carritos y acompaña la decisión de compra." },
      { k: "Paid media", d: "Cada lead entra a un flujo de atención, calificación, CRM y seguimiento." },
      { k: "B2B", d: "Filtra, califica, agenda y llega a la junta con contexto comercial." },
      { k: "Eventos / venues", d: "Cotizaciones, fechas, visitas y seguimiento en un solo flujo comercial." },
    ];
    return (
      <section className="sec">
        <div className="wrap">
          <span className="eyebrow reveal">Para quién</span>
          <h2 className="h-xl reveal" style={{ "--i": 1, marginTop: 16, maxWidth: "24ch" }}>
            Donde hay conversación, debe haber <span className="grad">criterio comercial</span>.
          </h2>
          <div className="pq-list">
            {rows.map((r, i) => (
              <div className="pq-row reveal" key={r.k} style={{ "--i": i }}>
                <span className="pq-num">{String(i + 1).padStart(2, "0")}</span>
                <span className="pq-k">{r.k}</span>
                <span className="pq-d">{r.d}</span>
                <span className="pq-arrow">{I("arrow-up-right", 20)}</span>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  // -------------------------------------- DASHBOARD (visibilidad + intervención humana)
  function Dashboard() {
    const convos = [
      { nm: "María G.", ls: "Sí, porfa 🙌", stat: "Nico atendiendo", dot: "var(--nico-violet)", active: true },
      { nm: "Luis P.", ls: "Perfecto, agendado.", stat: "Calificado", dot: "var(--nico-success)" },
      { nm: "Sofía R.", ls: "Quiero hablar con alguien.", stat: "Requiere humano", dot: "#FF8A7A" },
      { nm: "Carlos M.", ls: "¿Cuánto cuesta?", stat: "Conversando", dot: "var(--nico-violet)" },
    ];
    return (
      <section className="sec dash">
        <div className="wrap">
          <div className="split split-wide" style={{ alignItems: "center" }}>
            <div className="stack-md">
              <span className="eyebrow reveal">Visibilidad y control</span>
              <h2 className="h-lg reveal" style={{ "--i": 1 }}>
                Nico atiende. <span className="grad">Tu equipo mantiene el control.</span>
              </h2>
              <p className="lead muted reveal" style={{ "--i": 2, maxWidth: "44ch" }}>
                Cada conversación, etapa y siguiente paso queda visible. Tu equipo puede revisar qué respondió
                Nico, intervenir cuando haga falta y detectar qué oportunidades necesitan atención.
              </p>
              <ul className="dash-points reveal" style={{ "--i": 3 }}>
                {["Conversaciones y etapas en tiempo real", "Intervención humana cuando hace falta", "Estado de leads, citas, pendientes y pipeline"].map((t) => (
                  <li key={t}>{I("check", 18, "var(--nico-violet)")} {t}</li>
                ))}
              </ul>
            </div>
            <div className="reveal" style={{ "--i": 1 }}>
              <div className="dash-app">
                <div className="dash-side">
                  <div className="dash-side-h">Conversaciones</div>
                  {convos.map((c) => (
                    <div className="dash-convo" key={c.nm} data-active={c.active ? "" : undefined}>
                      <span className="portrait" style={{ width: 30, height: 30 }}>{I("user-round", 15)}</span>
                      <div style={{ minWidth: 0 }}>
                        <div className="nm">{c.nm}</div>
                        <div className="ls">{c.ls}</div>
                        <div className="stat" style={{ color: c.dot }}>
                          <span className="dash-sdot" style={{ background: c.dot }}></span>{c.stat}
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
                <div className="dash-main">
                  <div className="dash-main-h">
                    <span className="portrait" style={{ width: 34, height: 34 }}>{I("user-round", 17)}</span>
                    <div style={{ lineHeight: 1.2 }}>
                      <div style={{ fontSize: "var(--fs-sm)", fontWeight: "var(--fw-semibold)" }}>María G.</div>
                      <div style={{ fontSize: "var(--fs-micro)", color: "var(--text-muted)" }}>WhatsApp · Anuncio</div>
                    </div>
                    <span className="dash-badge" style={{ marginLeft: "auto" }}>{I("sparkles", 13)} Nico atendiendo</span>
                  </div>
                  <div className="dash-thread">
                    <div className="crm-bub lead">Hola, vi su anuncio de limpieza dental.</div>
                    <div className="crm-bub nico">¡Hola María! ¿Te aparto el jueves 16:00?</div>
                    <div className="crm-bub lead">Sí, porfa 🙌</div>
                  </div>
                  <div className="dash-takeover">
                    {I("hand", 18, "var(--nico-violet)")}
                    <span className="tk-t">Nico está atendiendo. Tu equipo puede intervenir si la oportunidad requiere criterio humano.</span>
                    <button className="btn btn-grad dash-take-btn">Tomar el control</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  }

  // -------------------------------------------------------------- JUNTA
  function Junta() {
    const bullets = [
      ["file-text", "Contexto previo del lead, campaña, conversación y CRM"],
      ["message-square", "Preguntas en tiempo real sobre el proyecto"],
      ["list-checks", "Acuerdos y pendientes al terminar"],
      ["gauge", "Evaluación de calidad de la junta"],
      ["refresh-cw", "Actualización automática del CRM"],
      ["users", "Resumen para el equipo en Slack/Odoo"],
    ];
    return (
      <section className="sec junta">
        <div className="wrap split split-wide" style={{ alignItems: "center" }}>
          <div className="stack-md">
            <span className="eyebrow reveal">Memoria comercial en vivo</span>
            <h2 className="h-lg reveal" style={{ "--i": 1 }}>
              Nico también <span className="grad">entra a la junta</span>.
            </h2>
            <p className="lead muted reveal" style={{ "--i": 2, maxWidth: "42ch" }}>
              No solo resume: llega con contexto y sale con acuerdos, pendientes y el CRM actualizado.
            </p>
          </div>
          <div className="reveal" style={{ "--i": 1 }}>
            <div className="junta-card">
              {bullets.map(([ic, t]) => (
                <div className="junta-item" key={t}>
                  <span className="junta-ic">{I(ic, 18, "var(--nico-violet)")}</span>
                  <span>{t}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    );
  }

  // ----------------------------------------------------- SLACK (hacia adentro)
  function Slack() {
    const qs = [
      "¿Qué leads están calientes hoy?",
      "¿Qué citas tenemos esta semana?",
      "¿Qué oportunidades se atoraron?",
      "¿Cuánto gastó la campaña?",
      "¿Qué vendedor tiene pendientes?",
      "¿Qué juntas sí valieron la pena?",
      "¿Qué recomienda atender primero?",
    ];
    return (
      <section className="sec">
        <div className="wrap">
          <span className="eyebrow reveal">Hacia adentro</span>
          <h2 className="h-xl reveal" style={{ "--i": 1, marginTop: 16, maxWidth: "22ch" }}>
            Nico también trabaja <span className="grad">hacia adentro</span>.
          </h2>
          <p className="lead muted reveal" style={{ "--i": 2, marginTop: 14, maxWidth: "46ch" }}>
            Vive en Slack y le respondes al equipo qué está pasando en ventas.
          </p>
          <div className="slack-qs reveal" style={{ "--i": 3 }}>
            {qs.map((q) => (
              <span className="slack-q" key={q}>{I("message-square", 14, "var(--nico-violet)")} {q}</span>
            ))}
          </div>
        </div>
      </section>
    );
  }

  // -------------------------------------------------- TRUST (integración + seguridad)
  function Trust() {
    const cards = [
      { icon: "plug", h: "Se conecta a lo que ya usas", p: "Nos adaptamos a tus sistemas vía API: CRM, agenda, herramientas internas y operación, sin que cambies tu stack." },
      { icon: "lock", h: "Confidencialidad", p: "Tus conversaciones y datos comerciales son tuyos. Acceso controlado y trato confidencial de la información." },
      { icon: "shield-check", h: "Ciberseguridad", p: "Operación sobre la API oficial de WhatsApp Business, con prácticas de seguridad en cada integración." },
    ];
    return (
      <section className="sec">
        <div className="wrap">
          <span className="eyebrow reveal">Integración y seguridad</span>
          <h2 className="h-xl reveal" style={{ "--i": 1, marginTop: 16, maxWidth: "22ch" }}>
            Se adapta a tus sistemas. <span className="grad">Con tus datos protegidos.</span>
          </h2>
          <div className="trust-grid reveal" style={{ "--i": 2 }}>
            {cards.map((c) => (
              <div className="trust-card" key={c.h}>
                <span className="trust-ic">{I(c.icon, 22, "var(--nico-violet)")}</span>
                <h3 className="trust-h">{c.h}</h3>
                <p className="trust-p">{c.p}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  Object.assign(window, { CrmFlow, Dashboard, Voz, Difs, ParaQuien, Junta, Slack, Trust });
})();