/* Production mount */
const { useState, useEffect } = React;

/* V3 ADDENDUM 21 (2026-05-18) — Mobile narrative simplification.
   Wrapper para secciones que se ocultan por defecto en mobile pero siguen
   accesibles vía menú/anchor. Cuando el hash apunta a una seccion mobile-
   optional, se agrega `.is-revealed` al wrapper para mostrarla. La sección
   se mantiene revelada hasta que el usuario navegue a otra sección oculta
   (en cuyo caso ambas quedan reveladas — el state es aditivo). Desktop
   ignora la clase `.mobile-optional` (CSS solo aplica en `@media (max-width:
   767px)`). */
function MobileOptional({ id, revealed, children }) {
  const isRevealed = revealed.has(id);
  return (
    <div className={`mobile-optional${isRevealed ? ' is-revealed' : ''}`} data-mobile-section={id}>
      {children}
    </div>
  );
}

function App(){
  const defaults = window.__NG_DEFAULTS || {
    accent: 'cyan', headline: 'Tu negocio respondiendo\nmientras dormís.',
    dotDensity: 44, spotlight: 260, showPipeline: true
  };
  const t = defaults;

  /* IDs de secciones que se ocultan en mobile por defecto. */
  const MOBILE_OPTIONAL_IDS = ['problema', 'inteligencia-operativa', 'quienes-somos', 'faq'];

  /* State aditivo: cada vez que el hash apunta a una mobile-optional ID, se
     agrega al Set. Una vez revelada, sigue visible para que el usuario pueda
     navegar dentro de ella sin que se vuelva a ocultar al cambiar el hash. */
  const [revealed, setRevealed] = useState(() => new Set());
  useEffect(() => {
    function handleHash() {
      const hash = (window.location.hash || '').replace('#', '');
      if (MOBILE_OPTIONAL_IDS.includes(hash)) {
        setRevealed(prev => {
          if (prev.has(hash)) return prev;
          const next = new Set(prev);
          next.add(hash);
          return next;
        });
        /* Cuando se revela una sección oculta, scroll suave después del
           render (el browser ya intentó scroll antes — re-scroleamos). */
        requestAnimationFrame(() => {
          const el = document.getElementById(hash);
          if (el) {
            const top = el.getBoundingClientRect().top + window.scrollY - 40;
            window.scrollTo({ top, behavior: 'smooth' });
          }
        });
      }
    }
    handleHash(); // run on mount in case user lands con un hash directo
    window.addEventListener('hashchange', handleHash);
    return () => window.removeEventListener('hashchange', handleHash);
  }, []);

  useEffect(()=>{ window.__NG_SET_ACCENT && window.__NG_SET_ACCENT(t.accent); }, [t.accent]);
  useEffect(()=>{ window.__NG_SET_SPACING && window.__NG_SET_SPACING(t.dotDensity); }, [t.dotDensity]);
  useEffect(()=>{ window.__NG_SET_SPOTLIGHT && window.__NG_SET_SPOTLIGHT(t.spotlight); }, [t.spotlight]);

  return (
    <React.Fragment>
      <window.Nav />
      {/* ─────────────────────────────────────────────────────────────
         V1 commercial simplified — orden narrativo:
         Hero → Lo que resuelve la demo → Inteligencia operativa
         → Problema → Proceso → Empleados+Panel → Casos
         → Quiénes somos → FAQ → Contacto
         Eliminadas del render V1: SeccionUnoIntro, CasoReal, PorQue, Precios
         (sus funciones quedan en sections.jsx como dead code reversible).
         ──────────────────────────────────────────────────────────── */}
      <main>
        {/* V3: HeroV2 real del template Shader wallpapers (variante orbital,
            coreStyle tactical, eyesStyle covered, perimeter mode vía
            window.__NG_PERIMETER que se setea en index.html). El window.Hero
            quedó reasignado por hero-v2.jsx al final de su archivo, por eso
            esto invoca al HeroOrbital del template y no al Hero legacy de
            sections.jsx. */}
        <window.Hero
          variant="orbital"
          coreStyle="tactical"
          eyesStyle="covered"
          eyebrow="Inteligencia operativa para empresas"
          headline={'Empleados IA\nque entienden tu negocio\ny trabajan con *tus reglas*.'}
          subheadline="Atienden clientes, consultan datos, siguen procesos, detectan oportunidades y avisan al equipo cuando hace falta. Abajo vas a ver uno operando en una conversación real."
        />
        {/* V3: el HeroV2 del template NO incluye nuestra Demo V7 (el original
            tenía un DemoPeek mucho más simple en sus variantes pipeline/portal,
            y nada en orbital). Para preservar la Demo V7 que vivía dentro del
            Hero legacy, la montamos acá explícitamente, debajo del hero real.
            mt-* mantiene el gap del Hero legacy (mt-10/md:mt-16/lg:mt-20). */}
        {/* V3 polish ADDENDUM 13 (2026-05-18) — Demo V7 visible en mobile.
            Antes: `hidden md:block` ocultaba el demo en <768px porque el layout
            two-col no entraba. Ahora se muestra siempre; los estilos
            responsive en hero-v7-full.css apilan WhatsApp arriba y el Centro
            Operativo + output abajo en mobile (`@media (max-width: 767px)`). */}
        <div id="agente" className="block mt-10 md:mt-16 lg:mt-20">
          <div className="hero-v7-mount px-3 md:px-6 lg:px-10 mx-auto max-w-[1480px]">
            <window.HeroDemoV7Full />
          </div>
        </div>
        {/* V3 polish ADDENDUM 16 (2026-05-18) — background continuity.
            Antes (Addendum 7): un gradient negro de 220px tapaba el canvas
            de puntitos entre el demo V7 y `lo-que-resuelve`, creando un
            "bloque negro plano inesperado". Ahora se reemplazó por un fade
            mucho más sutil de 60px que arranca en negro semi-transparente
            (≈0.45) — lo justo para suavizar el borde inferior del demo
            (que tiene cards dark) hacia la siguiente sección sin cortar el
            canvas. Esto deja el fondo espacial visible en toda la página
            entre hero y footer. El footer mantiene su `bg-bg` propio. */}
        <div aria-hidden="true" className="relative" style={{ height: 0 }}>
          <div className="absolute inset-x-0 top-0 pointer-events-none"
            style={{
              height: 60, marginTop: -1, zIndex: 5,
              background: 'linear-gradient(to bottom,' +
                ' rgba(10,10,15,0.45) 0%,' +
                ' rgba(10,10,15,0.22) 40%,' +
                ' rgba(10,10,15,0.08) 75%,' +
                ' rgba(10,10,15,0) 100%)'
            }} />
        </div>
        <window.AgentResolvedSummarySection />
        <MobileOptional id="inteligencia-operativa" revealed={revealed}>
          <window.OperationalIntelligenceBridge />
        </MobileOptional>
        <MobileOptional id="problema" revealed={revealed}>
          <window.Problema />
        </MobileOptional>
        <window.Proceso />
        <window.EmpleadosCentro />
        <window.Verticales />
        <MobileOptional id="quienes-somos" revealed={revealed}>
          <window.QuienesSomos />
        </MobileOptional>
        <MobileOptional id="faq" revealed={revealed}>
          <window.Faq />
        </MobileOptional>
        <window.Contacto />
      </main>
      <window.Footer />

    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);