// V1 — Editorial Monolith
// Centered, big-type, sequential reveals. Feels like a printed magazine layout.

const ProblemSection = window.ProblemSection;
const SolutionSection = window.SolutionSection;
const LegalSection = window.LegalSection;
const ProjectionSection = window.ProjectionSection;
const ScrollRevealSection = window.ScrollRevealSection;

function V1Editorial() {
  const rootRef = React.useRef(null);
  const [root, setRoot] = React.useState(null);
  React.useEffect(() => {setRoot(rootRef.current);}, []);
  const isMobile = window.useIsMobile();

  const parallaxHero = useParallax(root, 0.15);
  const parallaxMono = useParallax(root, 0.08);

  return (
    <div ref={rootRef} style={{
      position: 'relative', width: '100%', height: '100%',
      overflow: 'auto', overflowX: 'hidden', background: '#faf8f3',
      color: '#0a0a0a', scrollBehavior: 'smooth',
      fontFeatureSettings: '"ss01", "ss02"'
    }}>
      <Grain opacity={0.08} />

      {/* Sticky top nav (Singular Views style) */}
      <TopNavSingular root={root} isMobile={isMobile} />

      {/* Hero — Singular Views style (centered, badge + headline + CTAs + app preview) */}
      <SingularHero root={root} isMobile={isMobile} />

      {/* Problem section */}
      <ProblemSection root={root} />

      {/* Solution section */}
      <SolutionSection root={root} />

      {/* Legal framework section */}
      <LegalSection root={root} />

      {/* Scroll-reveal dashboard preview — removed */}

      {/* Container Scroll — Aceternity adaptation */}
      <section id="app" style={{ position: 'relative', borderTop: '1px solid rgba(10,10,10,0.08)', overflow: 'hidden', scrollMarginTop: 80, background: '#f8f8f8' }}>
        <ContainerScroll
          root={root}
          titleComponent={
          <div style={{ padding: '0 24px', textAlign: 'center' }}>
              <div style={{
              fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
              letterSpacing: 2, textTransform: 'uppercase', opacity: 0.55, marginBottom: 24
            }}>
                ◇ La aplicación · ODAS Platform
</div>
              <h2 style={{
              fontFamily: 'Instrument Serif, serif',
              letterSpacing: '-0.035em',
              lineHeight: 1.0, fontWeight: 400, padding: 0, borderWidth: 0,
              fontSize: 30, margin: 0,
              color: '#0a0a0a',
              textWrap: 'balance',
            }}>
                Inteligencia operativa <em style={{ fontStyle: 'italic', opacity: 0.7 }}>en una sola</em> superficie.
              </h2>
            </div>
          }>
          
          <div style={{
            width: '100%', height: '100%',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            background: '#f8f8f8',
            borderRadius: 16,
            overflow: 'hidden'
          }}>
            <img
              src="assets/dashboard-factory-flow.png"
              alt="ODAS — diagrama de flujo: entradas, plataforma y resultados"
              style={{
                maxWidth: isMobile ? '95%' : 'min(880px, 75%)',
                maxHeight: '90%',
                width: 'auto', height: 'auto',
                objectFit: 'contain', objectPosition: 'center',
                display: 'block',
              }} />
          </div>
        </ContainerScroll>
      </section>

      {/* Projection 2026–2030 */}
      <ProjectionSection root={root} />

      {/* Cómo funciona — removed */}

      {/* FAQ — removed */}

      {/* Footer */}
      <Footer root={root} variant="v1" />
    </div>);

}

// ── Sticky Top Nav (Singular Views style) ─────────────────────
function TopNavSingular({ root, isMobile }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);

  const navItems = [
    { label: 'Problema', id: 'problema' },
    { label: 'Solución', id: 'solucion' },
    { label: 'Ley 1/2025', id: 'ley' },
    { label: 'Plataforma', id: 'app' },
    { label: 'Proyección', id: 'proyeccion' },
  ];

  React.useEffect(() => {
    const scroller = (root && typeof root.scrollTo === 'function') ? root : window;
    const onScroll = () => {
      const top = (scroller === window) ? window.scrollY : scroller.scrollTop;
      setScrolled(top > 24);
    };
    scroller.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => scroller.removeEventListener('scroll', onScroll);
  }, [root]);

  const handleNav = (e, id) => {
    e.preventDefault();
    setOpen(false);
    const target = document.getElementById(id);
    if (!target) return;
    const scroller = (root && typeof root.scrollTo === 'function') ? root : window;
    const scrollerRect = (scroller === window) ? { top: 0 } : scroller.getBoundingClientRect();
    const currentTop = (scroller === window) ? window.scrollY : scroller.scrollTop;
    const targetTop = target.getBoundingClientRect().top - scrollerRect.top + currentTop - 72;
    scroller.scrollTo({ top: targetTop, behavior: 'smooth' });
  };

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 100,
      width: '100%',
      background: scrolled ? 'rgba(250,248,243,0.88)' : 'rgba(250,248,243,0.5)',
      backdropFilter: 'saturate(180%) blur(14px)',
      WebkitBackdropFilter: 'saturate(180%) blur(14px)',
      borderBottom: scrolled ? '1px solid rgba(10,10,10,0.08)' : '1px solid transparent',
      transition: 'background 0.3s ease, border-color 0.3s ease',
    }}>
      <div style={{
        maxWidth: 1280, margin: '0 auto',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: isMobile ? '14px 20px' : '18px 32px',
        gap: 24,
      }}>
        {/* Logo */}
        <a href="#" onClick={(e) => { e.preventDefault(); const s = (root && typeof root.scrollTo === 'function') ? root : window; s.scrollTo({ top: 0, behavior: 'smooth' }); }}
           style={{ display: 'flex', alignItems: 'center', textDecoration: 'none', color: '#0a0a0a' }}>
          <img src="assets/odas-logo.png" alt="ODAS" style={{ height: isMobile ? 16 : 20, width: 'auto', display: 'block' }} />
        </a>

        {/* Desktop center menu */}
        {!isMobile && (
          <nav style={{ display: 'flex', alignItems: 'center', gap: 28 }}>
            {navItems.map((item) => (
              <a key={item.id} href={`#${item.id}`} onClick={(e) => handleNav(e, item.id)}
                 style={{
                   fontFamily: 'Instrument Sans, sans-serif',
                   fontSize: 14, color: 'rgba(10,10,10,0.72)',
                   textDecoration: 'none', letterSpacing: '-0.005em',
                   transition: 'color 0.2s',
                 }}
                 onMouseEnter={(e) => (e.currentTarget.style.color = '#0a0a0a')}
                 onMouseLeave={(e) => (e.currentTarget.style.color = 'rgba(10,10,10,0.72)')}>
                {item.label}
              </a>
            ))}
          </nav>
        )}

        {/* Right CTA */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          {!isMobile && (
            <a href="https://formacion.odas-eu.com/" target="_blank" rel="noopener noreferrer"
               style={{
                 fontFamily: 'Instrument Sans, sans-serif', fontSize: 14,
                 color: '#0a0a0a', textDecoration: 'none',
                 padding: '8px 14px',
                 border: '1px solid rgba(10,10,10,0.18)',
                 borderRadius: 8,
                 transition: 'border-color 0.2s',
               }}
               onMouseEnter={(e) => (e.currentTarget.style.borderColor = 'rgba(10,10,10,0.4)')}
               onMouseLeave={(e) => (e.currentTarget.style.borderColor = 'rgba(10,10,10,0.18)')}>
              Formación
            </a>
          )}
          <a href="mailto:hello@negentropylabs.com" style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            background: '#0a0a0a', color: '#faf8f3',
            padding: isMobile ? '8px 14px' : '9px 18px',
            borderRadius: 8,
            fontFamily: 'Instrument Sans, sans-serif',
            fontSize: isMobile ? 12 : 14, fontWeight: 500,
            textDecoration: 'none', whiteSpace: 'nowrap',
          }}>
            Solicitar acceso
          </a>
          {isMobile && (
            <button onClick={() => setOpen(!open)} aria-label="Menu" style={{
              appearance: 'none', background: 'transparent', border: 'none',
              cursor: 'pointer', padding: 6, display: 'flex', flexDirection: 'column', gap: 4,
            }}>
              <span style={{ width: 18, height: 1, background: '#0a0a0a', display: 'block' }} />
              <span style={{ width: 18, height: 1, background: '#0a0a0a', display: 'block' }} />
              <span style={{ width: 18, height: 1, background: '#0a0a0a', display: 'block' }} />
            </button>
          )}
        </div>
      </div>

      {isMobile && open && (
        <nav style={{
          display: 'flex', flexDirection: 'column',
          padding: '8px 20px 18px',
          background: 'rgba(250,248,243,0.96)',
          borderTop: '1px solid rgba(10,10,10,0.06)',
        }}>
          {navItems.map((item) => (
            <a key={item.id} href={`#${item.id}`} onClick={(e) => handleNav(e, item.id)}
               style={{
                 fontFamily: 'Instrument Sans, sans-serif', fontSize: 15, color: '#0a0a0a',
                 textDecoration: 'none', padding: '12px 0',
                 borderBottom: '1px solid rgba(10,10,10,0.06)',
               }}>
              {item.label}
            </a>
          ))}
          <a href="https://formacion.odas-eu.com/" target="_blank" rel="noopener noreferrer"
             style={{
               fontFamily: 'Instrument Sans, sans-serif', fontSize: 15, color: '#0a0a0a',
               textDecoration: 'none', padding: '12px 0',
             }}>
            Formación ↗
          </a>
        </nav>
      )}
    </header>
  );
}

// ── Hero Singular Views style (centered, badge + headline + 2 CTAs + app preview) ─
function SingularHero({ root, isMobile }) {
  const navTo = (id) => {
    const target = document.getElementById(id);
    if (!target) return;
    const scroller = (root && typeof root.scrollTo === 'function') ? root : window;
    const scrollerRect = (scroller === window) ? { top: 0 } : scroller.getBoundingClientRect();
    const currentTop = (scroller === window) ? window.scrollY : scroller.scrollTop;
    const targetTop = target.getBoundingClientRect().top - scrollerRect.top + currentTop - 72;
    scroller.scrollTo({ top: targetTop, behavior: 'smooth' });
  };

  return (
    <section style={{
      position: 'relative',
      padding: isMobile ? '16px 20px 0' : '20px 32px 0',
      background: '#faf8f3',
      overflow: 'hidden',
    }}>
      {/* Decorative apple branch — left side, behind dashboard */}
      <img
        src="assets/hero-apple.png"
        aria-hidden="true"
        alt=""
        style={{
          position: 'absolute',
          left: isMobile ? '-38%' : '-10%',
          top: isMobile ? '-15%' : '-35%',
          width: isMobile ? '90%' : '54%',
          maxWidth: 880,
          height: 'auto',
          zIndex: 0,
          mixBlendMode: 'multiply',
          pointerEvents: 'none',
          userSelect: 'none',
          maskImage: 'linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 22%, rgba(0,0,0,1) 100%)',
          WebkitMaskImage: 'linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 22%, rgba(0,0,0,1) 100%)',
        }}
      />

      <div style={{
        position: 'relative', zIndex: 1,
        maxWidth: 760, margin: '0 auto',
        display: 'flex', flexDirection: 'column', alignItems: 'center',
        textAlign: 'center',
      }}>
        {/* Pill badge */}
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          padding: '8px 18px',
          borderRadius: 999,
          background: 'rgba(192,83,42,0.08)',
          border: '1px solid rgba(192,83,42,0.22)',
          fontFamily: 'Instrument Sans, sans-serif',
          fontSize: 13, fontWeight: 500,
          color: '#0a0a0a',
        }}>
          <span style={{ width: 7, height: 7, borderRadius: '50%', background: '#c0532a', boxShadow: '0 0 0 4px rgba(192,83,42,0.12)' }} />
          Ley 1/2025 · Vigente
        </div>

        {/* Headline */}
        <h1 style={{
          fontFamily: 'Instrument Serif, serif',
          fontWeight: 400,
          fontSize: isMobile ? 'clamp(30px, 7vw, 40px)' : 'clamp(40px, 4.4vw, 60px)',
          lineHeight: 1.05,
          letterSpacing: '-0.03em',
          margin: '24px 0 0',
          color: '#0a0a0a',
          textWrap: 'balance',
          maxWidth: 820,
        }}>
          Inteligencia operativa para el <em style={{ fontStyle: 'italic', opacity: 0.85 }}>excedente alimentario</em>
        </h1>

        {/* Subhead */}
        <p style={{
          margin: '20px 0 0',
          maxWidth: 580,
          fontFamily: 'Instrument Sans, sans-serif',
          fontSize: isMobile ? 14 : 15,
          lineHeight: 1.5,
          color: 'rgba(10,10,10,0.65)',
          textWrap: 'pretty',
        }}>
          ODAS ayuda a empresas y administraciones a equilibrar oferta y demanda del excedente alimentario con inteligencia artificial y trazabilidad legal sin esperas.
        </p>

        {/* CTAs */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 12,
          marginTop: 22,
          flexDirection: isMobile ? 'column' : 'row',
        }}>
          <a href="mailto:hello@negentropylabs.com" style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            background: '#0a0a0a', color: '#faf8f3',
            padding: '14px 24px',
            borderRadius: 999,
            fontFamily: 'Instrument Sans, sans-serif',
            fontSize: 14, fontWeight: 500,
            textDecoration: 'none',
          }}>
            Solicitar acceso
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <line x1="5" y1="12" x2="19" y2="12" />
              <polyline points="12 5 19 12 12 19" />
            </svg>
          </a>
          <a href="#app" onClick={(e) => { e.preventDefault(); navTo('app'); }} style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            background: 'transparent', color: '#0a0a0a',
            border: '1px solid rgba(10,10,10,0.2)',
            padding: '14px 24px',
            borderRadius: 999,
            fontFamily: 'Instrument Sans, sans-serif',
            fontSize: 14, fontWeight: 500,
            textDecoration: 'none',
          }}>
            Ver la plataforma
          </a>
        </div>

        {/* Dashboard with browser frame (macOS dots + URL bar) */}
        <div style={{
          width: '100%', maxWidth: 880,
          marginTop: isMobile ? 24 : 32,
          marginBottom: 0,
          borderRadius: 12,
          overflow: 'hidden',
          background: '#fff',
          border: '1px solid rgba(10,10,10,0.1)',
          boxShadow: '0 24px 60px rgba(10,10,10,0.10), 0 4px 12px rgba(10,10,10,0.04)',
        }}>
          {/* Browser top bar */}
          <div style={{
            display: 'flex', alignItems: 'center', gap: 8,
            padding: '14px 18px',
            background: '#f3f1eb',
            borderBottom: '1px solid rgba(10,10,10,0.08)',
            position: 'relative',
            zIndex: 2,
          }}>
            <span style={{ width: 12, height: 12, borderRadius: '50%', background: '#ff5f57' }} />
            <span style={{ width: 12, height: 12, borderRadius: '50%', background: '#febc2e' }} />
            <span style={{ width: 12, height: 12, borderRadius: '50%', background: '#28c840' }} />
            <div style={{
              marginLeft: 18,
              padding: '7px 14px',
              background: '#fff',
              border: '1px solid rgba(10,10,10,0.08)',
              borderRadius: 8,
              fontFamily: 'JetBrains Mono, monospace',
              fontSize: 12,
              color: 'rgba(10,10,10,0.55)',
              flex: 1,
              maxWidth: 380,
              textAlign: 'left',
            }}>app.odas-eu.com/dashboard</div>
          </div>

          {/* Dashboard image */}
          <img
            src="assets/dashboard-retirados.png"
            alt="ODAS dashboard — Productos retirados (Ley 1/2025)"
            style={{
              width: '100%',
              height: 'auto',
              display: 'block',
              marginTop: -28, // tuck image's own top frame behind our HTML frame
              position: 'relative',
              zIndex: 1,
            }}
          />
        </div>
      </div>
    </section>
  );
}

// ── Demo frame ─────────────────────────────────────────────────
function DemoFrame({ root }) {
  const [active, setActive] = React.useState(0);
  const items = ['Mapa de señales', 'Eventos', 'Consultas', 'Linaje'];
  return (
    <div style={{
      maxWidth: 1200, margin: '0 auto',
      background: '#0a0a0a', color: '#faf8f3', borderRadius: 4,
      overflow: 'hidden', boxShadow: '0 40px 100px rgba(10,10,10,0.25)',
      border: '1px solid rgba(255,255,255,0.08)'
    }}>
      <div style={{
        display: 'flex', alignItems: 'center',
        padding: '14px 20px', borderBottom: '1px solid rgba(255,255,255,0.08)',
        gap: 8
      }}>
        <span style={{ width: 10, height: 10, borderRadius: '50%', background: 'rgba(255,255,255,0.15)' }} />
        <span style={{ width: 10, height: 10, borderRadius: '50%', background: 'rgba(255,255,255,0.15)' }} />
        <span style={{ width: 10, height: 10, borderRadius: '50%', background: 'rgba(255,255,255,0.15)' }} />
        <div style={{
          marginLeft: 18, fontFamily: 'JetBrains Mono, monospace',
          fontSize: 11, opacity: 0.6, letterSpacing: 1
        }}>odas.app/console/observation</div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '220px 1fr', minHeight: 520 }}>
        <aside style={{ borderRight: '1px solid rgba(255,255,255,0.08)', padding: '24px 16px' }}>
          <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: 1.5, opacity: 0.4, marginBottom: 16 }}>WORKSPACE</div>
          {items.map((it, i) =>
          <div key={it} data-magnet onClick={() => setActive(i)} style={{
            padding: '10px 12px', fontSize: 13, cursor: 'pointer',
            background: active === i ? 'rgba(255,255,255,0.08)' : 'transparent',
            borderRadius: 3, marginBottom: 2,
            display: 'flex', justifyContent: 'space-between', alignItems: 'center'
          }}>
              <span>{it}</span>
              {active === i && <span style={{ width: 4, height: 4, borderRadius: '50%', background: '#fff' }} />}
            </div>
          )}
          <div style={{ marginTop: 40, paddingTop: 20, borderTop: '1px solid rgba(255,255,255,0.08)' }}>
            <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: 1.5, opacity: 0.4, marginBottom: 12 }}>SAVED</div>
            {['Red hídrica — NE', 'Picos de carga', 'Anomalías 72h'].map((s) =>
            <div key={s} style={{ fontSize: 12, opacity: 0.7, padding: '6px 12px' }}>◇ {s}</div>
            )}
          </div>
        </aside>
        <div style={{ position: 'relative', background: 'radial-gradient(circle at 30% 40%, rgba(255,255,255,0.06), transparent 60%)' }}>
          {active === 0 && <MapView />}
          {active === 1 && <EventsView />}
          {active === 2 && <QueryView />}
          {active === 3 && <LineageView />}
        </div>
      </div>
    </div>);

}

function MapView() {
  return (
    <div style={{ position: 'relative', height: '100%', minHeight: 520, padding: 24 }}>
      <svg viewBox="0 0 800 500" style={{ position: 'absolute', inset: 24, width: 'calc(100% - 48px)', height: 'calc(100% - 48px)' }}>
        <defs>
          <pattern id="map-grid" width="40" height="40" patternUnits="userSpaceOnUse">
            <path d="M40 0H0V40" fill="none" stroke="rgba(255,255,255,0.05)" strokeWidth="1" />
          </pattern>
          <radialGradient id="pulse">
            <stop offset="0%" stopColor="#fff" stopOpacity="0.8" />
            <stop offset="100%" stopColor="#fff" stopOpacity="0" />
          </radialGradient>
        </defs>
        <rect width="800" height="500" fill="url(#map-grid)" />
        <path d="M 100 380 Q 250 200, 400 260 T 720 180" stroke="rgba(255,255,255,0.25)" strokeWidth="1" fill="none" strokeDasharray="4 4" />
        <path d="M 80 140 Q 220 240, 380 200 T 700 340" stroke="rgba(255,255,255,0.18)" strokeWidth="1" fill="none" />
        {[
        { x: 180, y: 200, r: 6, pulse: true }, { x: 320, y: 140, r: 4 }, { x: 460, y: 280, r: 5, pulse: true },
        { x: 540, y: 180, r: 3 }, { x: 620, y: 320, r: 5 }, { x: 240, y: 360, r: 4, pulse: true },
        { x: 700, y: 240, r: 4 }, { x: 120, y: 300, r: 3 }, { x: 400, y: 400, r: 4 }].
        map((n, i) =>
        <g key={i}>
            {n.pulse && <circle cx={n.x} cy={n.y} r="24" fill="url(#pulse)">
              <animate attributeName="r" from="8" to="32" dur="2.5s" repeatCount="indefinite" />
              <animate attributeName="opacity" from="0.8" to="0" dur="2.5s" repeatCount="indefinite" />
            </circle>}
            <circle cx={n.x} cy={n.y} r={n.r} fill="#fff" />
          </g>
        )}
      </svg>
      <div style={{
        position: 'absolute', top: 24, right: 24,
        background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.12)',
        borderRadius: 3, padding: '14px 16px', minWidth: 220,
        backdropFilter: 'blur(8px)'
      }}>
        <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: 1.5, opacity: 0.5, marginBottom: 10 }}>NODE — 46.2A</div>
        <div style={{ fontSize: 14, marginBottom: 6 }}>Estación Norte</div>
        <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, opacity: 0.6, lineHeight: 1.7 }}>
          pressure&nbsp;&nbsp;3.42 bar<br />
          flow&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;812 L/s<br />
          state&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; nominal
        </div>
      </div>
      <div style={{
        position: 'absolute', bottom: 24, left: 24,
        fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: 1.5, opacity: 0.4
      }}>▮▮▯▯▯ realtime · 1,284 nodes observed</div>
    </div>);

}

function EventsView() {
  const rows = [
  { t: '14:02:11', sev: 'info', m: 'Sincronización completa — cluster NE', c: 'N-204' },
  { t: '14:01:58', sev: 'warn', m: 'Desviación presión fuera de banda 2σ', c: 'N-116' },
  { t: '14:00:42', sev: 'info', m: 'Caudal restaurado tras ventana de 84s', c: 'N-304' },
  { t: '13:59:20', sev: 'alert', m: 'Correlación causal identificada · rama E', c: 'N-116→N-088' },
  { t: '13:58:03', sev: 'info', m: 'Reescritura de topología aplicada', c: 'N-—' },
  { t: '13:55:48', sev: 'warn', m: 'Latencia por encima del umbral contratado', c: 'N-012' }];

  const sevColor = { info: 'rgba(255,255,255,0.5)', warn: '#e8c97b', alert: '#e8a07b' };
  return (
    <div style={{ padding: 24, fontFamily: 'JetBrains Mono, monospace', fontSize: 12 }}>
      <div style={{ display: 'grid', gridTemplateColumns: '100px 60px 1fr 120px', gap: 12, opacity: 0.4, fontSize: 10, letterSpacing: 1.5, paddingBottom: 12, borderBottom: '1px solid rgba(255,255,255,0.1)' }}>
        <span>TIME</span><span>SEV</span><span>EVENT</span><span>SOURCE</span>
      </div>
      {rows.map((r, i) =>
      <div key={i} style={{ display: 'grid', gridTemplateColumns: '100px 60px 1fr 120px', gap: 12, padding: '14px 0', borderBottom: '1px solid rgba(255,255,255,0.05)', alignItems: 'center' }}>
          <span style={{ opacity: 0.6 }}>{r.t}</span>
          <span style={{ color: sevColor[r.sev], textTransform: 'uppercase' }}>◆ {r.sev}</span>
          <span style={{ opacity: 0.9, fontFamily: 'Instrument Sans, sans-serif', fontSize: 13 }}>{r.m}</span>
          <span style={{ opacity: 0.6 }}>{r.c}</span>
        </div>
      )}
    </div>);

}

function QueryView() {
  return (
    <div style={{ padding: 28 }}>
      <div style={{
        border: '1px solid rgba(255,255,255,0.15)', borderRadius: 3,
        padding: '16px 18px', fontFamily: 'Instrument Sans, sans-serif', fontSize: 15
      }}>
        <span style={{ opacity: 0.4 }}>&gt; </span>
        ¿Qué causó la desviación de presión en N-116 esta mañana?
        <span style={{ marginLeft: 4, animation: 'blink 1s step-end infinite' }}>▌</span>
      </div>
      <style>{`@keyframes blink { 50% { opacity: 0; } }`}</style>
      <div style={{ marginTop: 24, lineHeight: 1.65, fontSize: 14, maxWidth: 620 }}>
        A las 13:58:03 la rama E entró en un régimen de oscilación tras la reconfiguración
        de la topología. <span style={{ background: 'rgba(255,255,255,0.1)', padding: '1px 4px' }}>N-088</span> propagó
        un transitorio hacia <span style={{ background: 'rgba(255,255,255,0.1)', padding: '1px 4px' }}>N-116</span> que
        excedió el umbral 2σ durante 84 segundos.
      </div>
      <div style={{ marginTop: 28, fontFamily: 'JetBrains Mono, monospace', fontSize: 11, opacity: 0.5, letterSpacing: 1 }}>
        CITAS — 3 señales · 2 eventos · 1 linaje verificado
      </div>
    </div>);

}

function LineageView() {
  return (
    <div style={{ padding: 40, height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <svg viewBox="0 0 600 300" style={{ width: '100%', maxWidth: 620 }}>
        {[
        ['Sensor 3A', 60, 60, 'source'], ['Sensor 3B', 60, 150, 'source'], ['Sensor 3C', 60, 240, 'source'],
        ['Agg-NE', 240, 100], ['Agg-NW', 240, 220],
        ['Causal link', 400, 160],
        ['Alert', 560, 160, 'end']].
        map((n, i) => {
          const [label, x, y, kind] = n;
          return (
            <g key={i}>
              <rect x={x - 50} y={y - 18} width="100" height="36" rx="2"
              fill={kind === 'end' ? '#fff' : 'rgba(255,255,255,0.04)'}
              stroke="rgba(255,255,255,0.2)" />
              <text x={x} y={y + 4} textAnchor="middle" fill={kind === 'end' ? '#0a0a0a' : '#fff'} fontSize="11" fontFamily="JetBrains Mono, monospace">{label}</text>
            </g>);

        })}
        {[[110, 60, 190, 100], [110, 150, 190, 100], [110, 150, 190, 220], [110, 240, 190, 220],
        [290, 100, 350, 160], [290, 220, 350, 160], [450, 160, 510, 160]].map((e, i) =>
        <line key={i} x1={e[0]} y1={e[1]} x2={e[2]} y2={e[3]} stroke="rgba(255,255,255,0.3)" strokeWidth="1" />
        )}
      </svg>
    </div>);

}

// ── How it works ───────────────────────────────────────────────
function HowItWorks({ root }) {
  const steps = [
  { n: '01', t: 'Conectar', d: 'Un agente ligero descubre dispositivos, protocolos y esquemas. Tiempo a la primera señal: < 4 min.' },
  { n: '02', t: 'Modelar', d: 'El sistema construye un gemelo espacial y causal. El modelo se mantiene a sí mismo.' },
  { n: '03', t: 'Preguntar', d: 'Los equipos consultan en lenguaje natural. Las respuestas llevan citas y linaje.' },
  { n: '04', t: 'Decidir', d: 'Las acciones son reproducibles y auditables. Cero caja negra.' }];

  return (
    <section style={{
      position: 'relative', padding: '80px 48px',
      background: '#0a0a0a', color: '#faf8f3',
      overflow: 'hidden'
    }}>
      <Reveal root={root}>
        <div style={{ maxWidth: 1200, margin: '0 auto 72px' }}>
          <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: 1.5, textTransform: 'uppercase', opacity: 0.5, marginBottom: 16 }}>03 — Proceso</div>
          <h2 style={{ fontSize: 'clamp(36px, 4.8vw, 68px)', letterSpacing: '-0.045em', lineHeight: 1, margin: 0, fontWeight: 400, maxWidth: 800 }}>
            De señal a <em style={{ fontFamily: 'Instrument Serif, serif' }}>decisión</em> en cuatro movimientos.
          </h2>
        </div>
      </Reveal>

      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        {steps.map((s, i) =>
        <Reveal key={i} root={root} delay={i * 0.08}>
            <div style={{
            display: 'grid', gridTemplateColumns: '80px 1fr 2fr',
            padding: '40px 0', gap: 40,
            borderTop: '1px solid rgba(255,255,255,0.12)',
            alignItems: 'baseline'
          }}>
              <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 12, opacity: 0.4, letterSpacing: 1 }}>{s.n}</div>
              <h3 style={{ fontSize: 42, margin: 0, fontWeight: 400, letterSpacing: '-0.03em' }}>{s.t}</h3>
              <p style={{ fontSize: 17, lineHeight: 1.5, color: 'rgba(250,248,243,0.7)', margin: 0, maxWidth: 500, textWrap: 'pretty' }}>{s.d}</p>
            </div>
          </Reveal>
        )}
      </div>
    </section>);

}

// ── FAQ ────────────────────────────────────────────────────────
function FAQ({ root }) {
  const [open, setOpen] = React.useState(0);
  const items = [
  { q: '¿Cómo se compara ODAS con una plataforma BI?', a: 'BI responde a preguntas predefinidas sobre datos históricos. ODAS construye un modelo causal del mundo físico y lo consulta en tiempo real. No son alternativas: ODAS alimenta el BI con contexto verificado.' },
  { q: '¿Dónde se ejecuta el sistema?', a: 'On-premise, híbrido o en la nube del cliente. ODAS nunca centraliza los datos: el cómputo viaja a la señal, no la señal al cómputo.' },
  { q: '¿Qué protocolos industriales soporta?', a: 'Los 40+ más comunes, incluyendo OPC UA, Modbus, MQTT, BACnet, CAN y protocolos propietarios vía adaptadores ligeros.' },
  { q: '¿Cómo se verifica una respuesta del sistema?', a: 'Cada respuesta incluye citas a las señales originales, linaje completo de las transformaciones aplicadas y una firma que permite reproducir la consulta de forma determinista.' },
  { q: '¿Es compatible con normativas como ISO 27001 o NIS2?', a: 'ODAS fue diseñado bajo supuestos de soberanía de datos. La arquitectura es auditable por terceros y cumple con los requisitos de ambos marcos.' }];

  return (
    <section style={{ padding: '80px 48px', borderTop: '1px solid rgba(10,10,10,0.08)' }}>
      <Reveal root={root}>
        <div style={{ maxWidth: 900, margin: '0 auto 60px' }}>
          <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: 1.5, textTransform: 'uppercase', opacity: 0.5, marginBottom: 16 }}>
</div>
          <h2 style={{ fontSize: '30.4px', letterSpacing: '-0.045em', lineHeight: 1, margin: 0, fontWeight: 400 }}>
            Nuestro <em style={{ fontFamily: 'Instrument Serif, serif' }}>objetivo</em>.
          </h2>
        </div>
      </Reveal>
      <div style={{ maxWidth: 900, margin: '0 auto' }}>
        {items.map((it, i) => <Reveal key={i} root={root} delay={i * 0.05}>
            <div data-magnet onClick={() => setOpen(open === i ? -1 : i)}
          style={{
            borderTop: '1px solid rgba(10,10,10,0.12)',
            padding: '28px 0', cursor: 'pointer',
            display: 'grid', gridTemplateColumns: '1fr 28px', gap: 24
          }}>
              <div>
                <div style={{ fontSize: 22, letterSpacing: '-0.02em', fontWeight: 400 }}>{it.q}</div>
                <div style={{
                maxHeight: open === i ? 200 : 0, overflow: 'hidden',
                transition: 'max-height .6s cubic-bezier(.2,.7,.1,1), margin-top .4s, opacity .4s',
                marginTop: open === i ? 14 : 0,
                opacity: open === i ? 1 : 0,
                fontSize: 15, lineHeight: 1.55, color: '#555', textWrap: 'pretty', maxWidth: 700
              }}>{it.a}</div>
              </div>
              <div style={{
              width: 24, height: 24, position: 'relative', marginTop: 4,
              transform: open === i ? 'rotate(45deg)' : 'rotate(0)',
              transition: 'transform .4s cubic-bezier(.2,.7,.1,1)'
            }}>
                <span style={{ position: 'absolute', top: 11, left: 0, right: 0, height: 1, background: '#0a0a0a' }} />
                <span style={{ position: 'absolute', left: 11, top: 0, bottom: 0, width: 1, background: '#0a0a0a' }} />
              </div>
            </div>
          </Reveal>
        )}
      </div>
    </section>);

}

// ── Footer ─────────────────────────────────────────────────────
function Footer({ root, variant }) {
  const [copied, setCopied] = React.useState(false);
  const handleCopy = (e) => {
    e.preventDefault();
    navigator.clipboard?.writeText('hello@negentropylabs.com').then(() => {
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    });
  };

  return (
    <footer style={{
      position: 'relative', padding: '80px 48px 24px',
      background: '#0a0a0a', color: '#faf8f3', overflow: 'hidden'
    }}>
      {/* Contact card */}
      <Reveal root={root}>
        <div style={{
          maxWidth: 1280, margin: '0 auto 64px',
          position: 'relative',
          border: '1px solid rgba(250,248,243,0.12)',
          padding: '56px 48px',
          display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 64,
          alignItems: 'end'
        }}>
          {/* Subtle radial accent */}
          <div style={{
            position: 'absolute', inset: 0, pointerEvents: 'none',
            background: 'radial-gradient(circle at 90% 10%, rgba(192,83,42,0.14), transparent 55%)'
          }} />

          {/* Left: eyebrow + headline */}
          <div style={{ position: 'relative' }}>
            <div style={{
              fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
              letterSpacing: 1.5, opacity: 0.55, textTransform: 'uppercase',
              marginBottom: 20,
              display: 'flex', alignItems: 'center', gap: 10
            }}>
              <span style={{
                width: 6, height: 6, borderRadius: '50%',
                background: '#c0532a', boxShadow: '0 0 0 4px rgba(192,83,42,0.18)'
              }} />
              Contacto · Disponible
            </div>
            <h2 style={{
              fontFamily: 'Instrument Serif, serif',
              fontSize: 'clamp(40px, 5vw, 72px)',
              lineHeight: 0.95, letterSpacing: '-0.04em',
              margin: 0, fontWeight: 400, textWrap: 'balance'
            }}>
              ¿Hablamos sobre <em style={{ fontStyle: 'italic' }}>tu programa</em> de excedente?
            </h2>
            <p style={{
              marginTop: 22, fontSize: 14.5, lineHeight: 1.55,
              color: 'rgba(250,248,243,0.65)', maxWidth: 440,
              textWrap: 'pretty', margin: '22px 0 0'
            }}>
              Respuesta directa del equipo fundador en menos de 48 horas. Reuniones disponibles en Madrid, Barcelona y remoto.
            </p>
          </div>

          {/* Right: email card */}
          <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', gap: 18 }}>
            <div style={{
              fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
              letterSpacing: 1.5, opacity: 0.45, textTransform: 'uppercase'
            }}>◇ Escríbenos a</div>

            <a
              data-magnet
              href="mailto:hello@negentropylabs.com"
              style={{
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                gap: 24, padding: '22px 24px',
                background: 'rgba(250,248,243,0.04)',
                border: '1px solid rgba(250,248,243,0.18)',
                color: '#faf8f3', textDecoration: 'none',
                transition: 'background 0.3s ease, border-color 0.3s ease'
              }}
              onMouseEnter={(e) => {
                e.currentTarget.style.background = 'rgba(250,248,243,0.08)';
                e.currentTarget.style.borderColor = 'rgba(250,248,243,0.32)';
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.background = 'rgba(250,248,243,0.04)';
                e.currentTarget.style.borderColor = 'rgba(250,248,243,0.18)';
              }}>
              
              <span style={{
                fontFamily: 'Instrument Serif, serif',
                fontSize: 'clamp(22px, 2.4vw, 32px)',
                letterSpacing: '-0.02em', lineHeight: 1
              }}>
                hello@negentropylabs.com
              </span>
              <span style={{
                width: 44, height: 44, borderRadius: '50%',
                background: '#E1E0CC', color: '#0a0a0a',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                flexShrink: 0
              }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <line x1="5" y1="12" x2="19" y2="12" />
                  <polyline points="12 5 19 12 12 19" />
                </svg>
              </span>
            </a>

            {/* Secondary actions */}
            <div style={{
              display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1,
              background: 'rgba(250,248,243,0.12)',
              border: '1px solid rgba(250,248,243,0.12)'
            }}>
              <button
                onClick={handleCopy}
                style={{
                  appearance: 'none', border: 'none', cursor: 'pointer',
                  background: '#0a0a0a', color: '#faf8f3',
                  padding: '14px 18px', textAlign: 'left',
                  fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
                  letterSpacing: 1.2, textTransform: 'uppercase',
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                  gap: 12, transition: 'background 0.2s ease'
                }}
                onMouseEnter={(e) => {e.currentTarget.style.background = 'rgba(250,248,243,0.05)';}}
                onMouseLeave={(e) => {e.currentTarget.style.background = '#0a0a0a';}}>
                
                <span style={{ opacity: copied ? 1 : 0.7 }}>
                  {copied ? '✓ Copiado' : 'Copiar email'}
                </span>
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ opacity: 0.55 }}>
                  <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
                  <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
                </svg>
              </button>
              <a
                href="https://formacion.odas-eu.com/"
                target="_blank" rel="noopener noreferrer"
                style={{
                  background: '#0a0a0a', color: '#faf8f3',
                  padding: '14px 18px', textDecoration: 'none',
                  fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
                  letterSpacing: 1.2, textTransform: 'uppercase',
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                  gap: 12, transition: 'background 0.2s ease'
                }}
                onMouseEnter={(e) => {e.currentTarget.style.background = 'rgba(250,248,243,0.05)';}}
                onMouseLeave={(e) => {e.currentTarget.style.background = '#0a0a0a';}}>
                
                <span style={{ opacity: 0.7 }}>Formación</span>
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ opacity: 0.55 }}>
                  <path d="M7 17L17 7" />
                  <polyline points="7 7 17 7 17 17" />
                </svg>
              </a>
            </div>

            {/* Meta row */}
            <div style={{
              marginTop: 8, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 16,
              fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
              letterSpacing: 1.2, textTransform: 'uppercase'
            }}>
              {[
              { l: 'Tiempo respuesta', v: '< 48 h' },
              { l: 'Idiomas', v: 'ES · EN' },
              { l: 'Zona horaria', v: 'CET · UTC+1' }].
              map((m, i) =>
              <div key={i}>
                  <div style={{ opacity: 0.4, marginBottom: 6 }}>{m.l}</div>
                  <div style={{ opacity: 0.85 }}>{m.v}</div>
                </div>
              )}
            </div>
          </div>
        </div>
      </Reveal>

      {/* Brand row */}
      <Reveal root={root} delay={0.1}>
        <div style={{
          maxWidth: 1280, margin: '0 auto',
          paddingTop: 32,
          borderTop: '1px solid rgba(255,255,255,0.12)',
          display: 'flex', alignItems: 'center', gap: 16
        }}>
          <img src="assets/odas-logo.png" alt="ODAS" style={{
            height: 32, width: 'auto', display: 'block',
            filter: 'invert(1)'
          }} />
          <span style={{
            fontFamily: 'Instrument Serif, serif', fontStyle: 'italic',
            fontSize: 26, opacity: 0.35, lineHeight: 1
          }}>©</span>
          <span style={{
            fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
            letterSpacing: 1.5, opacity: 0.5, textTransform: 'uppercase'
          }}>NEGENTROPY LABS - ODAS V1</span>
        </div>
      </Reveal>

      {/* Bottom meta */}
      <div style={{
        display: 'flex', justifyContent: 'space-between',
        maxWidth: 1280, margin: '40px auto 0',
        fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
        letterSpacing: 1.5, opacity: 0.4, textTransform: 'uppercase'
      }}>
        <span>© 2026 · Observation Data Architecture Systems, SL</span>
        <span>Spain — Australia</span>
      </div>
    </footer>);

}

Object.assign(window, { V1Editorial, DemoFrame, HowItWorks, FAQ, Footer });