// NAXUS — Main page (sections)

const { useEffect, useRef, useState } = React;

const SERVICES = [
{ icon: "bot", title: "Chatbots con IA", desc: "Atención al cliente 24/7 que responde como tu mejor vendedor — en WhatsApp, web y redes." },
{ icon: "workflow", title: "Automatización de procesos", desc: "Conectamos tus apps con n8n, Make o Zapier. Lo que haces manual, lo hace tu sistema." },
{ icon: "agent", title: "Agentes IA a la medida", desc: "Asistentes que entienden tu negocio y ejecutan tareas reales: investigan, redactan, deciden." },
{ icon: "sales", title: "Ventas y CRM", desc: "Pipeline limpio, seguimientos automáticos y leads que nunca se enfrían." },
{ icon: "data", title: "Análisis con IA", desc: "Convertimos tus datos en reportes y predicciones que sí entiendes y usas." },
{ icon: "api", title: "Integraciones", desc: "Tu sitio, tu CRM, tu inventario y tu contabilidad hablando entre sí, sin parches." },
{ icon: "content", title: "Generación de contenido", desc: "Posts, correos y campañas escritas por IA con tu voz — listas para publicar." }];


const PROCESS = [
{ n: "01", title: "Diagnóstico", desc: "Una llamada de 30 min. Identificamos las 3 fugas más caras de tu operación." },
{ n: "02", title: "Diseño", desc: "Mapeamos el flujo automatizado: qué entra, qué sale, qué decide la IA." },
{ n: "03", title: "Construcción", desc: "Implementamos en 1-3 semanas. Sin código tuyo, sin reemplazar lo que ya tienes." },
{ n: "04", title: "Optimización", desc: "Ajustamos con datos reales. Tu sistema mejora cada mes, no se queda obsoleto." }];


const CASES = [
{ badge: "Servicios", title: "Atendía 80 chats al día yo solo", desc: "El bot de naxus filtra el 70% y solo me pasa los leads calientes con todo el contexto.", alt: false },
{ badge: "E-commerce", title: "Reportes de 6 horas → 30 segundos", desc: "Conectamos Shopify, Meta Ads y Google Sheets. Reportes diarios automáticos al correo del dueño.", alt: true },
{ badge: "Inmobiliaria", title: "Leads se enfriaban en el correo", desc: "Agente IA califica, agenda visita en el calendario del agente y reactiva contactos viejos.", alt: false },
{ badge: "Educación", title: "Cobranza manual a 400 alumnos", desc: "Recordatorios automáticos por WhatsApp con tono humano. Cobranza al día por primera vez en años.", alt: true }];


const STATS = [
{ num: "70%", label: "Tiempo recuperado", desc: "promedio en tareas operativas" },
{ num: "24/7", label: "Disponibilidad", desc: "atención sin descanso ni turnos" },
{ num: "2-3 sem", label: "Implementación", desc: "del primer flujo en producción" },
{ num: "10x", label: "ROI proyectado", desc: "en los primeros 6 meses" }];


const TESTIMONIALS = [
{ quote: "Pasamos de 'tengo que contratar a alguien' a 'el bot ya respondió por mí'. Recuperé mis fines de semana.", name: "Andrea Martínez", role: "FUNDADORA · ESTUDIO LEGAL", initials: "AM" },
{ quote: "Conectaron mi tienda con mi inventario y mi WhatsApp en 11 días. No vuelvo a hacer un reporte a mano.", name: "Carlos Rojas", role: "CEO · MARCA DE ROPA", initials: "CR" },
{ quote: "Pensé que la IA era humo. Naxus me mostró exactamente qué procesos automatizar y cuánto me iba a ahorrar. Sin venderme nada raro.", name: "Lucía Pereira", role: "DIRECTORA · ACADEMIA ONLINE", initials: "LP" }];


const FAQ = [
{ q: "¿Necesito saber de tecnología?", a: "Para nada. Tú nos cuentas el problema en tus palabras, nosotros diseñamos y construimos. Te entregamos algo que funciona y te enseñamos a usarlo." },
{ q: "¿Cuánto tarda implementar una automatización?", a: "El primer flujo suele estar en producción entre 1 y 3 semanas. Proyectos más grandes los dividimos en entregas semanales para que veas valor desde el día uno." },
{ q: "¿Qué pasa si ya uso otras herramientas?", a: "Mejor. Integramos lo que ya tienes — CRM, hojas de cálculo, WhatsApp Business, redes, ERPs. La idea es sumar inteligencia, no reemplazar lo que funciona." },
{ q: "¿Manejan datos sensibles con responsabilidad?", a: "Sí. Trabajamos con infraestructura cifrada, contratos de confidencialidad y nunca usamos tus datos para entrenar modelos públicos. Tus datos son tuyos." },
{ q: "¿Cuánto cuesta?", a: "Depende del problema. Tenemos proyectos desde algunos cientos de dólares (automatizaciones puntuales) hasta soluciones más completas. El diagnóstico inicial es gratis y siempre te damos un precio cerrado." },
{ q: "¿Y si no funciona?", a: "Si en las primeras 2 semanas no estás convencido del valor, te devolvemos el 100% sin preguntas. Nuestro modelo se basa en resultados visibles, no en facturar horas." }];


/* ---------- Reveal-on-scroll ---------- */
function useReveal() {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add("in");
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12 });
    el.querySelectorAll(".reveal").forEach((n) => io.observe(n));
    return () => io.disconnect();
  }, []);
  return ref;
}

/* ---------- FAQ ---------- */
function FaqItem({ q, a, defaultOpen }) {
  const [open, setOpen] = useState(!!defaultOpen);
  return (
    <div className="faq-item" data-open={open ? "true" : "false"}>
      <button className="faq-q" onClick={() => setOpen((v) => !v)}>
        <span>{q}</span>
        <span className="toggle">{window.Icon.plus}</span>
      </button>
      <div className="faq-a"><p>{a}</p></div>
    </div>);

}

/* ---------- Hero stage with logo + parallax ---------- */
function HeroStage() {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    let rafId = 0;
    const target = { x: 0, y: 0, rx: 0, ry: 0 };
    const current = { x: 0, y: 0, rx: 0, ry: 0 };
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      const cx = r.left + r.width / 2;
      const cy = r.top + r.height / 2;
      const dx = (e.clientX - cx) / r.width;
      const dy = (e.clientY - cy) / r.height;
      target.x = dx * 24;
      target.y = dy * 18;
      target.rx = dx * 10;
      target.ry = -dy * 10;
    };
    const tick = () => {
      current.x += (target.x - current.x) * 0.08;
      current.y += (target.y - current.y) * 0.08;
      current.rx += (target.rx - current.rx) * 0.08;
      current.ry += (target.ry - current.ry) * 0.08;
      el.style.setProperty("--parX", current.x.toFixed(2) + "px");
      el.style.setProperty("--parY", current.y.toFixed(2) + "px");
      el.style.setProperty("--parRX", current.rx.toFixed(2) + "deg");
      el.style.setProperty("--parRY", current.ry.toFixed(2) + "deg");
      rafId = requestAnimationFrame(tick);
    };
    window.addEventListener("mousemove", onMove);
    rafId = requestAnimationFrame(tick);
    return () => {
      window.removeEventListener("mousemove", onMove);
      cancelAnimationFrame(rafId);
    };
  }, []);
  return (
    <div className="hero-stage" ref={ref}>
      <div className="layer hero-halo" />
      <div className="layer ring r3" />
      <div className="layer ring r2" />
      <div className="layer ring r1" />
      <div className="layer hero-orbit">
        <span className="p" /><span className="p" /><span className="p" />
      </div>
      <div className="layer hero-logo">
        <window.NaxusLogo />
      </div>
    </div>);

}

/* ---------- Page ---------- */
function App() {
  const [t, setTweak] = window.useTweaks(window.TWEAK_DEFAULTS);
  const wrapRef = useReveal();

  // Apply mode to body
  useEffect(() => {
    document.documentElement.setAttribute("data-mode", t.mode);
  }, [t.mode]);

  const scrollTo = (id) => {
    const el = document.getElementById(id);
    if (el) {
      const top = el.getBoundingClientRect().top + window.scrollY - 70;
      window.scrollTo({ top, behavior: "smooth" });
    }
  };

  return (
    <div ref={wrapRef}>
      {/* Background atmosphere */}
      <div className="bg-stage">
        <div className="bg-grid" />
        <div className="bg-orb cyan" />
        <div className="bg-orb magenta" />
        <div className="bg-orb violet" />
      </div>

      {/* Floating particle constellation */}
      <window.ParticleField />

      {/* Nav */}
      <nav className="nav">
        <div className="shell nav-inner">
          <div className="brand">
            <div className="brand-mark"><window.NaxusLogo animate={false} /></div>
            <span className="brand-name">Naxus</span>
          </div>
          <div className="nav-links">
            <a onClick={() => scrollTo("servicios")}>Servicios</a>
            <a onClick={() => scrollTo("proceso")}>Proceso</a>
            <a onClick={() => scrollTo("casos")}>Casos</a>
            <a onClick={() => scrollTo("faq")}>FAQ</a>
          </div>
          <button className="btn btn-ghost" onClick={() => scrollTo("contacto")}>
            Empezar
          </button>
        </div>
      </nav>

      {/* Hero */}
      <section className="hero" style={{ opacity: "1" }}>
        <div className="hero-bg" />
        <div className="hero-pulse left" />
        <div className="hero-pulse right" />
        <div className="hero-scanlines" />
        <div className="shell">
          <div className="hero-copy">
            <div className="hero-eyebrow">
              <span className="dot" />
              AUTOMATIZACIÓN · INTELIGENCIA ARTIFICIAL
            </div>
            <h1 className="hero-title">
              Tu negocio funcionando solo,<br />
              <span className="accent">mientras tú duermes.</span>
            </h1>
            <p className="hero-sub">
              Diseñamos sistemas con IA que automatizan lo repetitivo,
              responden por ti y convierten tus procesos en máquinas que escalan.
              Dinos tu problema — nosotros construimos la solución.
            </p>
            <div className="hero-actions">
              <button className="btn btn-primary" onClick={() => scrollTo("contacto")}>
                Cuéntanos tu problema {window.Icon.arrow}
              </button>
              <button className="btn btn-ghost" onClick={() => scrollTo("servicios")}>
                Ver qué hacemos
              </button>
            </div>

            <div className="hero-meta">
              <div className="hero-meta-item">
                <div className="hero-meta-num">+40</div>
                <div className="hero-meta-label">flujos implementados</div>
              </div>
              <div className="hero-meta-item">
                <div className="hero-meta-num">+12,000</div>
                <div className="hero-meta-label">horas humanas liberadas</div>
              </div>
              <div className="hero-meta-item">
                <div className="hero-meta-num">2-3 sem</div>
                <div className="hero-meta-label">tiempo promedio en vivo</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Services */}
      <section id="servicios">
        <div className="shell">
          <div className="section-head reveal">
            <div className="section-kicker">/ Servicios</div>
            <h2 className="section-title">Todo lo que la IA puede automatizar — bajo un mismo equipo.</h2>
            <p className="section-lede">
              No vendemos herramientas sueltas. Diseñamos el sistema completo, lo construimos y lo dejamos funcionando.
            </p>
          </div>

          <div className="services-grid reveal">
            {SERVICES.map((s, i) =>
            <div key={s.title} className="service">
                <div className="service-num">{String(i + 1).padStart(2, "0")}</div>
                <div className="service-icon" style={{ color: i % 2 ? "var(--magenta)" : "var(--cyan)" }}>
                  {window.Icon[s.icon]}
                </div>
                <h3 className="service-title">{s.title}</h3>
                <p className="service-desc">{s.desc}</p>
              </div>
            )}
            <div className="service" style={{ background: "transparent", display: "flex", justifyContent: "center", alignItems: "center", textAlign: "center" }}>
              <div>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.1em", color: "var(--fg-mute)", marginBottom: 10 }}>+ TU PROCESO</div>
                <div style={{ fontSize: 16, color: "var(--fg-dim)", maxWidth: 200 }}>
                  Si es repetitivo, probablemente podamos automatizarlo.
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Process */}
      <section id="proceso">
        <div className="shell">
          <div className="section-head reveal">
            <div className="section-kicker">/ Cómo funciona</div>
            <h2 className="section-title">Cuatro pasos. Cero fricción.</h2>
            <p className="section-lede">
              Desde la primera llamada hasta tu primer flujo en producción, en menos de un mes.
            </p>
          </div>

          <div className="process reveal">
            {PROCESS.map((p) =>
            <div key={p.n} className="process-step">
                <div className="process-num">{p.n}</div>
                <h3 className="process-title">{p.title}</h3>
                <p className="process-desc">{p.desc}</p>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* Use cases */}
      <section id="casos">
        <div className="shell">
          <div className="section-head reveal">
            <div className="section-kicker">/ Casos reales</div>
            <h2 className="section-title">Problemas que ya hemos resuelto.</h2>
            <p className="section-lede">
              Quizá te suene familiar. Cada caso empezó con una conversación, igual que la tuya.
            </p>
          </div>

          <div className="cases reveal">
            {CASES.map((c) =>
            <div key={c.title} className="case">
                <span className={"case-badge" + (c.alt ? " alt" : "")}>{c.badge}</span>
                <div className="case-body">
                  <h3 className="case-title">"{c.title}"</h3>
                  <p className="case-desc">{c.desc}</p>
                </div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* Stats */}
      <section>
        <div className="shell">
          <div className="stats reveal">
            {STATS.map((s) =>
            <div key={s.label} className="stat">
                <div className="stat-num">{s.num}</div>
                <div className="stat-label">{s.label}</div>
                <div className="stat-desc">{s.desc}</div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* Testimonials */}
      <section>
        <div className="shell">
          <div className="section-head reveal">
            <div className="section-kicker">/ Testimonios</div>
            <h2 className="section-title">Lo que dicen quienes ya delegaron a la IA.</h2>
          </div>

          <div className="testimonials reveal">
            {TESTIMONIALS.map((t) =>
            <div key={t.name} className="testimonial">
                <p className="testimonial-quote">"{t.quote}"</p>
                <div className="testimonial-author">
                  <div className="author-avatar">{t.initials}</div>
                  <div>
                    <div className="author-name">{t.name}</div>
                    <div className="author-role">{t.role}</div>
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* About */}
      <section id="sobre">
        <div className="shell">
          <div className="about reveal">
            <div className="about-visual" style={{ backgroundColor: "rgb(12, 14, 22)", opacity: "1" }}>
              <window.NaxusLogo />
            </div>
            <div className="about-body">
              <div className="section-kicker">/ Sobre naxus</div>
              <h2 className="section-title" style={{ marginTop: 12, marginBottom: 20 }}>
                Somos el equipo que monta tu cerebro digital.
              </h2>
              <p>
                <strong>naxus</strong> nació para resolver una frustración común: los negocios saben
                que la IA puede ayudarlos, pero no saben por dónde empezar. Y mientras dudan,
                pierden horas, leads y dinero todos los días.
              </p>
              <p>
                Nosotros traducimos esa frustración en sistemas. Combinamos automatización
                clásica con agentes de IA modernos, integraciones limpias y atención humana
                de verdad.
              </p>
              <ul className="about-points">
                <li>Sin contratos eternos ni promesas vacías.</li>
                <li>Precio cerrado por proyecto, no por hora.</li>
                <li>Te enseñamos a operar lo que construimos.</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section id="faq">
        <div className="shell">
          <div className="section-head reveal">
            <div className="section-kicker">/ Preguntas frecuentes</div>
            <h2 className="section-title">Lo que casi todos preguntan.</h2>
          </div>

          <div className="faq-list reveal">
            {FAQ.map((f, i) =>
            <FaqItem key={f.q} q={f.q} a={f.a} defaultOpen={i === 0} />
            )}
          </div>
        </div>
      </section>

      {/* Wizard / Contact */}
      <section id="contacto" className="wizard-section">
        <div className="shell">
          <div className="section-head reveal" style={{ textAlign: "center", margin: "0 auto 56px" }}>
            <div className="section-kicker" style={{ alignSelf: "center" }}>/ Empieza ahora</div>
            <h2 className="section-title">Cuéntanos tu problema.<br />La IA hace el resto.</h2>
            <p className="section-lede" style={{ marginInline: "auto" }}>
              Diagnóstico inicial gratis. Sin compromiso. Respondemos en menos de 24 horas.
            </p>
          </div>
          <div className="reveal" style={{ maxWidth: 820, margin: "0 auto" }}>
            <window.Wizard destinationEmail={t.destinationEmail} />
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="footer">
        <div className="shell footer-inner">
          <div className="brand">
            <div className="brand-mark"><window.NaxusLogo animate={false} /></div>
            <span className="brand-name">naxus</span>
          </div>
          <div className="footer-meta">© 2026 naxus · automatización con IA</div>
          <div className="footer-links">
            <a onClick={() => scrollTo("servicios")}>Servicios</a>
            <a onClick={() => scrollTo("faq")}>FAQ</a>
            <a onClick={() => scrollTo("contacto")}>Contacto</a>
          </div>
        </div>
      </footer>

      {/* Tweaks panel */}
      <window.TweaksPanel>
        <window.TweakSection label="Estilo visual">
          <window.TweakRadio
            label="Modo"
            value={t.mode}
            options={[
            { value: "conservative", label: "Conservador" },
            { value: "bold", label: "Atrevido" }]
            }
            onChange={(v) => setTweak("mode", v)} />
          
        </window.TweakSection>

        <window.TweakSection label="Configuración">
          <window.TweakText
            label="Correo destino"
            value={t.destinationEmail}
            onChange={(v) => setTweak("destinationEmail", v)} />
          
        </window.TweakSection>
      </window.TweaksPanel>
    </div>);

}

window.App = App;