// Propuesta B — Balanceada CON ANIMACIONES
// Hero asimétrico + dashboard mockup vivo + flujo animado de procesos.
// Animaciones: counter-up, chart con dibujo, KPIs respirando, chip pulsante,
// partículas viajando por conector, rotating axis sutil, stagger on-mount.

// Inject keyframes once (B-scoped)
if (typeof document !== 'undefined' && !document.getElementById('propB-anim')) {
  const s = document.createElement('style');
  s.id = 'propB-anim';
  s.textContent = `
    @keyframes pbDraw { from { stroke-dashoffset: var(--len, 600); } to { stroke-dashoffset: 0; } }
    @keyframes pbFadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes pbPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.85); } }
    @keyframes pbRing { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(2.6); opacity: 0; } }
    @keyframes pbBreath { 0%,100% { box-shadow: 0 0 0 0 rgba(37,99,235,0); } 50% { box-shadow: 0 0 24px -6px rgba(37,99,235,0.45); } }
    @keyframes pbBarGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
    @keyframes pbDashScroll { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -16; } }
    @keyframes pbTokenFly { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
    @keyframes pbTickerSlide { from { transform: translateY(0); } to { transform: translateY(-100%); } }
    @keyframes pbScan { 0% { transform: translateY(-100%); } 100% { transform: translateY(2000%); } }
    @keyframes pbBlink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
    .pb-stagger > * { opacity: 0; animation: pbFadeUp 0.7s cubic-bezier(.2,.7,.3,1) forwards; }
    .pb-stagger > *:nth-child(1) { animation-delay: 0.05s; }
    .pb-stagger > *:nth-child(2) { animation-delay: 0.18s; }
    .pb-stagger > *:nth-child(3) { animation-delay: 0.30s; }
    .pb-stagger > *:nth-child(4) { animation-delay: 0.42s; }
    .pb-stagger > *:nth-child(5) { animation-delay: 0.54s; }
    .pb-stagger > *:nth-child(6) { animation-delay: 0.66s; }
    .pb-draw { stroke-dasharray: var(--len, 600); stroke-dashoffset: var(--len, 600); animation: pbDraw 1.6s 0.6s cubic-bezier(.2,.7,.3,1) forwards; }
    .pb-area-fade { opacity: 0; animation: pbFadeUp 0.8s 1.6s forwards; }
    .pb-bar { transform-origin: bottom; animation: pbBarGrow 0.7s cubic-bezier(.2,.7,.3,1) forwards; }
    .pb-breathe { animation: pbBreath 3.2s ease-in-out infinite; }
    .pb-pulse { animation: pbPulse 1.6s ease-in-out infinite; }
    .pb-blink { animation: pbBlink 1.1s steps(2) infinite; }
    .pb-flow { stroke-dasharray: 4 8; animation: pbDashScroll 0.8s linear infinite; }

    
    /* MOBILE: Responsive utilities */
    @media (max-width: 768px) {
      .pb-nav-links { display: none !important; }
    }
  `;
  document.head.appendChild(s);
}

// ─── Hooks ───────────────────────────────────────────────────────────────

function useInView(opts = { threshold: 0.2 }) {
  const ref = React.useRef(null);
  const [seen, setSeen] = React.useState(false);
  React.useEffect(() => {
    if (!ref.current || seen) return;
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setSeen(true); obs.disconnect(); }
    }, opts);
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, [seen]);
  return [ref, seen];
}

function useCounter(target, { duration = 1400, decimals = 0, prefix = '', suffix = '', start = false } = {}) {
  const [val, setVal] = React.useState(0);
  React.useEffect(() => {
    if (!start) return;
    const t0 = performance.now();
    let raf;
    const tick = (now) => {
      const p = Math.min(1, (now - t0) / duration);
      const eased = 1 - Math.pow(1 - p, 3);
      setVal(target * eased);
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [start, target, duration]);
  return prefix + val.toFixed(decimals) + suffix;
}

function Counter({ value, duration = 1400, decimals = 0, prefix = '', suffix = '', start = true, format }) {
  const v = useCounter(value, { duration, decimals, prefix, suffix, start });
  if (format) {
    const n = parseFloat(v.replace(/[^\d.-]/g, ''));
    return <>{format(n)}</>;
  }
  return <>{v}</>;
}


// MOBILE: Helper to get window width
function useWindowWidth() {
  const [width, setWidth] = React.useState(typeof window !== 'undefined' ? window.innerWidth : 1200);
  React.useEffect(() => {
    const handler = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handler);
    return () => window.removeEventListener('resize', handler);
  }, []);
  return width;
}

// ─── Helpers ────────────────────────────────────────────────────────────

function pbScrollTo(id) {
  document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
}

function pbOpenExternal(url) {
  window.open(url, '_blank', 'noopener,noreferrer');
}

function pbWhatsApp(phone, message = '') {
  const url = `https://wa.me/${phone}?text=${encodeURIComponent(message)}`;
  window.open(url, '_blank', 'noopener,noreferrer');
}

// ─── Component ──────────────────────────────────────────────────────────

function PropB() {
  return (
    <div style={{ background: AXIA.bg, color: AXIA.text, fontFamily: '"Inter", sans-serif' }}>
      <PropBNav />
      <PropBHero />
      <PropBFounderStrip />
      <PropBServices />
      <PropBStack />
      <PropBProcess />
      <PropBCases />
      <PropBGarantias />
      <PropBCTA />
      <PropBFAQ />
      <PropBFooter />
    </div>
  );
}

function PropBNav() {
  const width = useWindowWidth();
  const isMobile = width < 768;
  
  const navLinks = [
    { label: 'Capacidades', href: '#pilares' },
    { label: 'Proceso', href: '#proceso' },
    { label: 'Garantías', href: '#garantias' },
    { label: 'FAQ', href: '#faq' },
  ];
  
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      borderBottom: `1px solid ${AXIA.border}`,
      background: 'rgba(11,15,25,0.85)',
      backdropFilter: 'blur(12px)',
    }}>
      <div style={{ 
        maxWidth: 1280, 
        margin: '0 auto', 
        padding: isMobile ? '12px 20px' : '14px 32px',
        display: 'flex', 
        alignItems: 'center', 
        justifyContent: 'space-between' 
      }}>
        <AxiaWordmark size={isMobile ? 32 : 40} />
        
        <nav className="pb-nav-links" style={{ display: 'flex', gap: 32, fontSize: 14, color: AXIA.mutedHi }}>
          {navLinks.map((link) => (
            <a
              key={link.href}
              style={{ color: 'inherit', textDecoration: 'none', cursor: 'pointer' }}
              onClick={() => pbScrollTo(link.href.slice(1))}
            >
              {link.label}
            </a>
          ))}
        </nav>
        
        <span style={{ display: 'inline-flex', cursor: 'pointer' }} onClick={() => pbScrollTo('contacto')}>
          <BtnPrimary size="sm">{isMobile ? 'Mapa' : 'Mapa de Operación'}</BtnPrimary>
        </span>
      </div>
    </header>
  );
}

function PropBHero() {
  const width = useWindowWidth();
  const isMobile = width < 768;
  
  const [ref, seen] = useInView({ threshold: 0.1 });
  return (
    <section ref={ref} style={{
      position: 'relative',
      padding: isMobile ? '64px 20px 48px' : '96px 24px 64px',
      overflow: 'hidden',
      borderBottom: `1px solid ${AXIA.border}`,
    }}>
      <TechGrid opacity={0.3} />
      <Glow color={AXIA.primary} top="10%" left="60%" size={900} opacity={0.18} />
      <Glow color={AXIA.accent} top="80%" left="10%" size={600} opacity={0.1} />

      <div className="pb-stagger" style={{
        maxWidth: 1200,
        margin: '0 auto',
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : '1.05fr 0.95fr',
        gap: 64,
        alignItems: 'center',
        position: 'relative',
        zIndex: 1,
      }}>
        <div>
          <Eyebrow>OPERACIONES DIGITALES · TABASCO · MÉXICO</Eyebrow>

          <h1 style={{
            fontFamily: '"Syne", sans-serif',
            fontWeight: 700,
            fontSize: isMobile ? '36px' : 'clamp(40px, 5vw, 64px)',
            lineHeight: 1.05,
            letterSpacing: '-0.025em',
            color: AXIA.text,
            margin: '20px 0 8px',
          }}>
            Convertimos tus{' '}
            <span style={{
              position: 'relative',
              color: AXIA.primary,
              display: 'inline-block',
            }}>
              procesos
              <span style={{
                position: 'absolute',
                bottom: -4,
                left: 0,
                width: '100%',
                height: 4,
                background: AXIA.primary,
                borderRadius: 2,
                transform: 'skewX(-15deg)',
              }} />
            </span>
            <br />
            en{' '}
            <span style={{ color: AXIA.accent }}>sistemas</span>.
          </h1>

          <p style={{
            fontFamily: '"Inter", sans-serif',
            fontSize: 19,
            lineHeight: 1.55,
            color: AXIA.text,
            maxWidth: 560,
            margin: '32px 0 16px',
            fontWeight: 500,
          }}>
            Digitalizamos, automatizamos y conectamos tus procesos
            para que tomes decisiones con{' '}
            <span style={{ color: AXIA.primary }}>datos</span>,
            no corazonadas.
          </p>

          <p style={{
            fontFamily: '"Inter", sans-serif',
            fontSize: 15,
            lineHeight: 1.6,
            color: AXIA.mutedHi,
            maxWidth: 540,
            margin: '0 0 36px',
          }}>
            AXIA es el eje que conecta, estructura e impulsa tu operación.
            Primer sistema funcional en{' '}
            <strong style={{ color: AXIA.text }}>6 semanas</strong>.
          </p>

          <div style={{ display: 'flex', gap: 12, marginBottom: 56, flexWrap: 'wrap' }}>
            <span style={{ display: 'inline-flex' }} onClick={() => pbScrollTo('contacto')}>
              <BtnPrimary>Agenda tu Mapa de Operación <ArrowRight /></BtnPrimary>
            </span>
            <span style={{ display: 'inline-flex' }} onClick={() => pbScrollTo('proceso')}>
              <BtnSecondary>Ver cómo trabajamos</BtnSecondary>
            </span>
          </div>

          <div style={{
            display: 'grid',
            gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)',
            gap: 24,
            paddingTop: 32,
            borderTop: `1px solid ${AXIA.border}`,
            maxWidth: 540,
          }}>
            <HeroMetric value={6} suffix=" sem" label="Al primer sistema funcional" start={seen} />
            <HeroMetric value={100} suffix="%" label="Código y datos tuyos" start={seen} />
            <HeroMetric value={5} label="Capas conectadas en un sistema" start={seen} />
          </div>
        </div>

        {/* Dashboard mock — anchor visual */}
        <div style={{ position: 'relative' }}>
          <DashboardMockB visible={seen} />
          {/* floating chip with live pulse */}
          <div className="pb-breathe" style={{
            position: 'absolute', top: -16, left: -24,
            padding: '10px 14px',
            border: `1px solid ${AXIA.border}`,
            borderRadius: 12,
            background: AXIA.surface,
            display: 'flex', alignItems: 'center', gap: 10,
            boxShadow: '0 12px 32px -10px rgba(0,0,0,0.6)',
          }}>
            <span style={{ position: 'relative', width: 8, height: 8 }}>
              <span style={{ position: 'absolute', inset: 0, borderRadius: 999, background: AXIA.accent }} />
              <span style={{ position: 'absolute', inset: 0, borderRadius: 999, border: `1.5px solid ${AXIA.accent}`, animation: 'pbRing 1.6s ease-out infinite' }} />
            </span>
            <span style={{ fontSize: 12, fontFamily: '"JetBrains Mono", monospace', color: AXIA.text }}>en vivo</span>
            <span style={{ fontSize: 12, color: AXIA.mutedHi }}>· <Counter value={128} duration={1800} start={seen} /> procesos</span>
          </div>

          {seen && <FloatingToast />}
        </div>
      </div>
    </section>
  );
}

function HeroMetric({ value, raw, prefix = '', suffix = '', label, start }) {
  return (
    <div>
      <div style={{ fontFamily: '"Syne", sans-serif', fontSize: 32, fontWeight: 700, color: AXIA.text, letterSpacing: '-0.02em', lineHeight: 1, fontVariantNumeric: 'tabular-nums' }}>
        {raw ? raw : <Counter value={value} prefix={prefix} suffix={suffix} duration={1500} start={start} />}
      </div>
      <div style={{ marginTop: 6, fontSize: 12, color: AXIA.mutedHi, fontFamily: '"JetBrains Mono", monospace', textTransform: 'uppercase', letterSpacing: '0.08em' }}>
        {label}
      </div>
    </div>
  );
}

function FloatingToast() {
  const [show, setShow] = React.useState(false);
  React.useEffect(() => { const t = setTimeout(() => setShow(true), 1800); return () => clearTimeout(t); }, []);
  return (
    <div style={{
      position: 'absolute', bottom: -20, right: -16,
      padding: '12px 16px',
      border: `1px solid ${AXIA.accent}66`,
      borderRadius: 12,
      background: 'rgba(15,23,42,0.96)',
      backdropFilter: 'blur(8px)',
      display: 'flex', alignItems: 'center', gap: 12,
      boxShadow: `0 12px 32px -10px rgba(0,0,0,0.6), 0 0 24px -6px ${AXIA.accent}55`,
      opacity: show ? 1 : 0,
      transform: show ? 'translateY(0)' : 'translateY(12px)',
      transition: 'all 600ms cubic-bezier(.2,.7,.3,1)',
      maxWidth: 260,
    }}>
      <div style={{
        width: 28, height: 28, borderRadius: 8,
        background: `${AXIA.accent}22`,
        color: AXIA.accent,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        flexShrink: 0,
      }}>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
      </div>
      <div>
        <div style={{ fontSize: 12, fontWeight: 600 }}>Proceso #1247 cerrado</div>
        <div style={{ fontSize: 11, color: AXIA.mutedHi, fontFamily: '"JetBrains Mono", monospace', marginTop: 2 }}>auto · hace 2 seg</div>
      </div>
    </div>
  );
}

function DashboardMockB({ visible }) {
  return (
    <div style={{
      border: `1px solid ${AXIA.borderHi}`,
      borderRadius: 16,
      background: AXIA.surface,
      overflow: 'hidden',
      boxShadow: '0 30px 80px -20px rgba(0,0,0,0.7)',
      transform: 'perspective(1400px) rotateY(-4deg) rotateX(2deg)',
      position: 'relative',
    }}>
      {/* Scan line */}
      <div aria-hidden style={{
        position: 'absolute', inset: 0, pointerEvents: 'none', overflow: 'hidden', borderRadius: 16,
      }}>
        <div style={{
          position: 'absolute', left: 0, right: 0, height: 2,
          background: `linear-gradient(90deg, transparent, ${AXIA.primary}, transparent)`,
          opacity: 0.5,
          animation: 'pbScan 6s linear infinite',
        }} />
      </div>

      <div style={{ padding: '12px 16px', borderBottom: `1px solid ${AXIA.border}`, display: 'flex', gap: 8, alignItems: 'center' }}>
        <div style={{ display: 'flex', gap: 5 }}>
          <span style={{ width: 10, height: 10, borderRadius: 999, background: '#1F2937' }} />
          <span style={{ width: 10, height: 10, borderRadius: 999, background: '#1F2937' }} />
          <span style={{ width: 10, height: 10, borderRadius: 999, background: '#1F2937' }} />
        </div>
        <span style={{ marginLeft: 'auto', fontFamily: '"JetBrains Mono", monospace', fontSize: 11, color: AXIA.muted }}>axia.mx/operaciones</span>
      </div>

      <div style={{ padding: 16, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
        <KpiB k="Cumplimiento" target={94} suffix="%" delta="+3pp" big start={visible} />
        <KpiB k="Tickets" target={32} delta="−8" start={visible} />
        <KpiB k="Procesos activos" target={128} delta="+12%" start={visible} />
        <KpiB k="Ahorro / mes" target={24680} prefix="MXN " delta="+18%" small start={visible} format={(n) => 'MXN $' + (n / 1000).toFixed(1) + 'K'} />
      </div>

      <div style={{ padding: '0 16px 16px' }}>
        <div style={{
          padding: 16, border: `1px solid ${AXIA.border}`, borderRadius: 10, background: AXIA.card, height: 160,
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <div style={{ fontSize: 11, color: AXIA.mutedHi }}>Volumen 7d</div>
            <div style={{ display: 'flex', gap: 8, fontSize: 10, color: AXIA.muted, fontFamily: '"JetBrains Mono", monospace' }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}><span style={{ width: 8, height: 8, background: AXIA.primary, borderRadius: 2 }} /> auto</span>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}><span style={{ width: 8, height: 8, background: AXIA.accent, borderRadius: 2 }} /> manual</span>
            </div>
          </div>
          {/* SVG line chart with draw animation */}
          <svg viewBox="0 0 280 110" style={{ marginTop: 8, width: '100%', height: 110 }}>
            <defs>
              <linearGradient id="gradB" x1="0" x2="0" y1="0" y2="1">
                <stop offset="0%" stopColor={AXIA.primary} stopOpacity="0.4" />
                <stop offset="100%" stopColor={AXIA.primary} stopOpacity="0" />
              </linearGradient>
            </defs>
            <path className="pb-area-fade" d="M 0 80 L 40 60 L 80 70 L 120 40 L 160 50 L 200 25 L 240 30 L 280 15 L 280 110 L 0 110 Z" fill="url(#gradB)" />
            <path className={visible ? "pb-draw" : ""} style={{ '--len': 600 }}
              d="M 0 80 L 40 60 L 80 70 L 120 40 L 160 50 L 200 25 L 240 30 L 280 15"
              stroke={AXIA.primary} strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"
            />
            <path className={visible ? "pb-draw" : ""} style={{ '--len': 600, animationDelay: '1.0s' }}
              d="M 0 95 L 40 92 L 80 88 L 120 85 L 160 88 L 200 80 L 240 82 L 280 78"
              stroke={AXIA.accent} strokeWidth="1.5" fill="none" strokeDasharray="3 3" opacity="0.7"
            />
            {/* live dot */}
            {visible && (
              <g style={{ animation: 'pbFadeUp 0.6s 2.4s both' }}>
                <circle cx="280" cy="15" r="3.5" fill={AXIA.primary} />
                <circle cx="280" cy="15" r="3.5" fill="none" stroke={AXIA.primary} strokeWidth="1" style={{ transformOrigin: '280px 15px', animation: 'pbRing 1.8s ease-out infinite' }} />
              </g>
            )}
          </svg>
        </div>
      </div>
    </div>
  );
}

function KpiB({ k, target, prefix = '', suffix = '', delta, big, small, start, format }) {
  return (
    <div className="pb-breathe" style={{ padding: '14px 14px', border: `1px solid ${AXIA.border}`, borderRadius: 10, background: AXIA.card }}>
      <div style={{ fontSize: 10, color: AXIA.muted, fontFamily: '"JetBrains Mono", monospace', textTransform: 'uppercase', letterSpacing: '0.08em' }}>{k}</div>
      <div style={{ marginTop: 6, fontFamily: '"Syne", sans-serif', fontSize: small ? 18 : (big ? 28 : 22), fontWeight: 700, letterSpacing: '-0.02em', fontVariantNumeric: 'tabular-nums' }}>
        <Counter value={target} prefix={prefix} suffix={suffix} start={start} duration={1600} format={format} />
      </div>
      <div style={{ marginTop: 2, fontSize: 11, color: AXIA.accent, fontFamily: '"JetBrains Mono", monospace' }}>{delta}</div>
    </div>
  );
}

// ─── PropBFounderStrip (reemplaza PropBTrustedBy) ───────────────────────

function PropBFounderStrip() {
  return (
    <section style={{
      padding: '32px 24px',
      borderTop: `1px solid ${AXIA.border}`,
      borderBottom: `1px solid ${AXIA.border}`,
      background: AXIA.card,
    }}>
      <div style={{
        maxWidth: 1200,
        margin: '0 auto',
        display: 'grid',
        gridTemplateColumns: 'auto 1fr auto',
        gap: 32,
        alignItems: 'center',
      }}>
        <div style={{
          width: 56,
          height: 56,
          borderRadius: '50%',
          background: `linear-gradient(135deg, ${AXIA.primary}, ${AXIA.accent})`,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          fontFamily: '"Syne", sans-serif',
          fontWeight: 700,
          fontSize: 20,
          color: AXIA.text,
          flexShrink: 0,
        }}>
          AS
        </div>

        <div>
          <div style={{
            fontFamily: '"JetBrains Mono", monospace',
            fontSize: 11,
            color: AXIA.muted,
            textTransform: 'uppercase',
            letterSpacing: '0.08em',
            marginBottom: 4,
          }}>
            QUIÉN ESTÁ DETRÁS
          </div>
          <div style={{
            fontFamily: '"Inter", sans-serif',
            fontSize: 15,
            color: AXIA.text,
            lineHeight: 1.5,
          }}>
            <strong>AS, MBA</strong> — Ing. en Comunicaciones y Electrónica (IPN, ESIME).
            <span style={{ color: AXIA.mutedHi }}>
              {' '}Sistemas operacionales para empresas medianas. Tabasco como base, México como alcance.
            </span>
          </div>
        </div>

        <div style={{
          display: 'flex',
          gap: 8,
          flexWrap: 'wrap',
        }}>
          <PropBCredChip>IPN · ESIME</PropBCredChip>
          <PropBCredChip>MBA</PropBCredChip>
          <PropBCredChip>Tabasco · MX</PropBCredChip>
        </div>
      </div>
    </section>
  );
}

function PropBCredChip({ children }) {
  return (
    <span style={{
      fontFamily: '"JetBrains Mono", monospace',
      fontSize: 11,
      padding: '6px 10px',
      borderRadius: 6,
      background: AXIA.bg,
      border: `1px solid ${AXIA.border}`,
      color: AXIA.mutedHi,
      letterSpacing: '0.03em',
    }}>
      {children}
    </span>
  );
}

// ─── PropBServices (Pilares) ────────────────────────────────────────────

function PropBServices() {
  const width = useWindowWidth();
  const isMobile = width < 768;
  
  const servicios = [
    {
      n: '01',
      title: 'Formularios Inteligentes',
      desc: 'Captura estructurada desde web, móvil o WhatsApp. Validación en tiempo real, lógica condicional y datos listos para procesar — sin Excel intermedios.',
      icon: 'forms',
    },
    {
      n: '02',
      title: 'Bases de Datos',
      desc: 'Una sola fuente de verdad para tu operación. Estructura limpia, histórico completo, búsquedas rápidas y conexión con todas las demás capas del sistema.',
      icon: 'data',
    },
    {
      n: '03',
      title: 'Paneles de Control',
      desc: 'Dashboards en vivo con los KPIs que sí mueven tu operación. Filtros, exportables y vistas por rol — para que cada quien vea solo lo que necesita.',
      icon: 'dashboards',
    },
    {
      n: '04',
      title: 'Automatización de Procesos',
      desc: 'Flujos que se ejecutan solos: notificaciones, aprobaciones, integraciones, cierres de turno. El sistema trabaja mientras tu equipo se concentra en lo importante.',
      icon: 'automation',
    },
    {
      n: '05',
      title: 'IA Aplicada a tu Operación',
      desc: 'Modelos integrados a casos reales: clasificación de tickets, predicción de demanda, detección de anomalías, asistentes operativos. IA con propósito, no por moda.',
      icon: 'ai',
      highlight: true,
    },
  ];

  return (
    <section id="pilares" style={{
      padding: '96px 24px',
      position: 'relative',
      borderBottom: `1px solid ${AXIA.border}`,
    }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <Eyebrow>CAPACIDADES</Eyebrow>
        <h2 style={{
          fontFamily: '"Syne", sans-serif',
          fontWeight: 700,
          fontSize: 'clamp(28px, 3.4vw, 44px)',
          color: AXIA.text,
          margin: '16px 0 16px',
          letterSpacing: '-0.02em',
        }}>
          Cinco capacidades. Un sistema integrado.
        </h2>
        <p style={{
          fontFamily: '"Inter", sans-serif',
          fontSize: 17,
          color: AXIA.mutedHi,
          maxWidth: 640,
          margin: '0 0 56px',
          lineHeight: 1.6,
        }}>
          No vendemos features sueltos. Cada capa se diseña para conectar
          con las demás — porque tu operación tampoco trabaja en silos.
        </p>

        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)',
          gap: 16,
          marginBottom: 16,
        }}>
          {servicios.slice(0, 3).map((s) => (
            <PropBServicioCard key={s.n} {...s} />
          ))}
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)',
          gap: 16,
          maxWidth: 'calc(66.666% + 5.33px)',
          marginLeft: 'auto',
          marginRight: 'auto',
        }}>
          {servicios.slice(3, 5).map((s) => (
            <PropBServicioCard key={s.n} {...s} />
          ))}
        </div>
      </div>
    </section>
  );
}

function PropBServicioCard({ n, title, desc, icon, highlight }) {
  const [hover, setHover] = React.useState(false);
  const accentColor = highlight ? AXIA.accent : AXIA.primary;

  return (
    <article
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: AXIA.card,
        border: `1px solid ${hover ? accentColor : AXIA.border}`,
        borderRadius: 12,
        padding: 28,
        position: 'relative',
        transition: 'border-color 200ms',
        overflow: 'hidden',
      }}
    >
      <div style={{
        position: 'absolute',
        left: 0,
        top: 0,
        bottom: 0,
        width: 3,
        background: accentColor,
        opacity: hover ? 1 : 0.4,
        transition: 'opacity 200ms',
      }} />

      <div style={{
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'flex-start',
        marginBottom: 20,
      }}>
        <div style={{
          width: 44,
          height: 44,
          borderRadius: 10,
          background: highlight
            ? 'rgba(16, 185, 129, 0.1)'
            : 'rgba(37, 99, 235, 0.1)',
          border: `1px solid ${AXIA.border}`,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}>
          <SvcIcon name={icon} size={22} accent={accentColor} />
        </div>

        <span style={{
          fontFamily: '"JetBrains Mono", monospace',
          fontSize: 11,
          color: AXIA.muted,
          letterSpacing: '0.08em',
        }}>
          {n}
        </span>
      </div>

      <h3 style={{
        fontFamily: '"Syne", sans-serif',
        fontWeight: 600,
        fontSize: 20,
        color: AXIA.text,
        margin: '0 0 12px',
        letterSpacing: '-0.01em',
        lineHeight: 1.25,
      }}>
        {title}
      </h3>

      <p style={{
        fontFamily: '"Inter", sans-serif',
        fontSize: 14,
        color: AXIA.mutedHi,
        lineHeight: 1.6,
        margin: 0,
      }}>
        {desc}
      </p>

      {highlight && (
        <div style={{
          display: 'inline-flex',
          alignItems: 'center',
          gap: 6,
          fontFamily: '"JetBrains Mono", monospace',
          fontSize: 10,
          color: AXIA.accent,
          background: 'rgba(16, 185, 129, 0.08)',
          border: '1px solid rgba(16, 185, 129, 0.2)',
          padding: '4px 10px',
          borderRadius: 999,
          letterSpacing: '0.08em',
          marginTop: 16,
        }}>
          <span style={{
            width: 6,
            height: 6,
            borderRadius: '50%',
            background: AXIA.accent,
          }} />
          NUEVA CAPACIDAD
        </div>
      )}
    </article>
  );
}

// ─── PropBStack — NUEVO ─────────────────────────────────────────────────

function PropBStack() {
  const width = useWindowWidth();
  const isMobile = width < 768;
  
  const stack = [
    {
      cat: 'DATOS',
      items: ['PostgreSQL', 'Supabase', 'MySQL', 'Firebase']
    },
    {
      cat: 'BACKEND & APIS',
      items: ['Python', 'Node.js', 'REST APIs']
    },
    {
      cat: 'FRONTEND & APPS',
      items: ['React', 'Next.js', 'Webflow', 'Framer']
    },
    {
      cat: 'BI & DASHBOARDS',
      items: ['Power BI', 'Looker Studio', 'Dashboards a medida']
    },
    {
      cat: 'AUTOMATIZACIÓN E INTEGRACIÓN',
      items: ['Python / Node a medida', 'Google Workspace APIs', 'WhatsApp Business API']
    },
  ];

  const renderStackCard = (s, i) => (
    <div key={i} style={{
      background: AXIA.card,
      border: `1px solid ${AXIA.border}`,
      borderRadius: 10,
      padding: 24,
    }}>
      <div style={{
        fontFamily: '"JetBrains Mono", monospace',
        fontSize: 11,
        color: AXIA.accent,
        letterSpacing: '0.1em',
        marginBottom: 16,
        paddingBottom: 12,
        borderBottom: `1px solid ${AXIA.border}`,
      }}>
        {s.cat}
      </div>
      <div style={{
        display: 'flex',
        flexWrap: 'wrap',
        gap: 6,
      }}>
        {s.items.map((item, j) => (
          <span key={j} style={{
            fontFamily: '"Inter", sans-serif',
            fontSize: 13,
            color: AXIA.mutedHi,
            background: AXIA.bg,
            border: `1px solid ${AXIA.border}`,
            padding: '4px 10px',
            borderRadius: 6,
          }}>
            {item}
          </span>
        ))}
      </div>
    </div>
  );

  return (
    <section style={{
      padding: '96px 24px',
      borderBottom: `1px solid ${AXIA.border}`,
    }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <Eyebrow>TECNOLOGÍAS</Eyebrow>
        <h2 style={{
          fontFamily: '"Syne", sans-serif',
          fontWeight: 700,
          fontSize: isMobile ? '32px' : 'clamp(28px, 3.4vw, 40px)',
          color: AXIA.text,
          margin: '16px 0 16px',
          letterSpacing: '-0.02em',
        }}>
          Tecnologías abiertas. Tu sistema, sin candados.
        </h2>
        <p style={{
          fontFamily: '"Inter", sans-serif',
          fontSize: 17,
          color: AXIA.mutedHi,
          maxWidth: 640,
          margin: '0 0 56px',
          lineHeight: 1.6,
        }}>
          Trabajamos con tecnologías estándar de la industria.
          Tu sistema queda documentado y portable — el código y la infraestructura son tuyos desde el día uno.
        </p>

        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)',
          gap: 16,
          marginBottom: 16,
        }}>
          {stack.slice(0, 3).map((s, i) => renderStackCard(s, i))}
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)',
          gap: 16,
          maxWidth: 'calc(66.666% + 5.33px)',
          marginLeft: 'auto',
          marginRight: 'auto',
        }}>
          {stack.slice(3, 5).map((s, i) => renderStackCard(s, i + 3))}
        </div>
      </div>
    </section>
  );
}

// ─── PropBProcess (id="proceso") ────────────────────────────────────────

function PropBProcess() {
  const width = useWindowWidth();
  const isMobile = width < 768;
  
  const [ref, seen] = useInView({ threshold: 0.15 });
  const steps = [
    { n: '01', t: 'Diagnóstico', d: 'Entendemos el proceso crítico y dónde se pierde la data.', dur: '1 sem' },
    { n: '02', t: 'Mapeo', d: 'Documentamos actores, inputs, outputs y decisiones.', dur: '1 sem' },
    { n: '03', t: 'Diseño', d: 'Arquitectura de datos, flujos y UI sobre tu realidad.', dur: '1 sem' },
    { n: '04', t: 'Primer sistema', d: 'Sistema corriendo en producción en semanas, no en semestres.', dur: '3 sem' },
    { n: '05', t: 'Iteración', d: 'Despliegue con tu equipo, medición y mejora continua.', dur: 'continuo' },
  ];
  return (
    <section id="proceso" ref={ref} style={{ padding: '96px 32px', borderBottom: `1px solid ${AXIA.border}` }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ maxWidth: 640, marginBottom: 56 }}>
          <Eyebrow>Cómo trabajamos</Eyebrow>
          <h2 style={{ marginTop: 12, fontFamily: '"Syne", sans-serif', fontSize: 'clamp(32px, 4vw, 48px)', fontWeight: 700, letterSpacing: '-0.025em', lineHeight: 1.1 }}>
            De diagnóstico a sistema productivo.
          </h2>
          <p style={{ marginTop: 16, fontSize: 16, color: AXIA.mutedHi }}>
            Cinco pasos. Primer sistema funcional en seis semanas.
          </p>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
          {steps.map((s, i) => (
            <div key={s.n} style={{
              display: 'grid',
              gridTemplateColumns: '120px 200px 1fr 100px',
              gap: 32, padding: '28px 0',
              borderTop: `1px solid ${AXIA.border}`,
              borderBottom: i === steps.length - 1 ? `1px solid ${AXIA.border}` : 'none',
              alignItems: 'center',
              opacity: seen ? 1 : 0, transform: seen ? 'translateX(0)' : 'translateX(-12px)',
              transition: `all 600ms ${i * 100}ms cubic-bezier(.2,.7,.3,1)`,
            }}>
              <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 13, color: AXIA.primary, letterSpacing: '0.1em' }}>
                STEP / {s.n}
              </div>
              <div style={{ fontFamily: '"Syne", sans-serif', fontSize: 24, fontWeight: 600, letterSpacing: '-0.02em' }}>{s.t}</div>
              <div style={{ fontSize: 14, color: AXIA.mutedHi, lineHeight: 1.5, maxWidth: 480 }}>{s.d}</div>
              <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 12, color: AXIA.muted, textAlign: 'right' }}>{s.dur}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── PropBCases — MODIFICADO (badges + copy nuevo + nota al pie) ────────

function PropBCases() {
  const width = useWindowWidth();
  const isMobile = width < 768;
  
  const [ref, seen] = useInView({ threshold: 0.15 });
  const cases = [
    {
      tag: 'Manufactura',
      t: 'Formatos de recepción digitales',
      target: 65, suffix: '%', prefix: '−',
      l: 'tiempo de captura',
      desc: 'Captura de producción en planta + tablero en vivo de paros, mermas y eficiencia. Cierre de jornada automático con notificación a supervisión.',
      img: 'manufactura',
    },
    {
      tag: 'Servicios',
      t: 'CRM operativo a medida',
      raw: '+3×',
      l: 'visibilidad de pipeline',
      desc: 'Órdenes de servicio en campo desde celular, con trazabilidad de evidencia, firmas y materiales. Facturación pre-llenada al cierre.',
      img: 'crm',
    },
    {
      tag: 'Logística',
      t: 'Tracking de herramientas',
      raw: '0',
      l: 'pérdidas no rastreadas',
      desc: 'Seguimiento de embarques con eventos georreferenciados, alertas de desvíos y dashboard de cumplimiento por cliente o ruta.',
      img: 'tracker',
    },
  ];
  return (
    <section id="casos" ref={ref} style={{ padding: '96px 32px', borderBottom: `1px solid ${AXIA.border}` }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 48, flexWrap: 'wrap', gap: 24 }}>
          <div>
            <Eyebrow color={AXIA.accent}>Casos reales</Eyebrow>
            <h2 style={{ marginTop: 12, fontFamily: '"Syne", sans-serif', fontSize: 'clamp(32px, 4vw, 48px)', fontWeight: 700, letterSpacing: '-0.025em', lineHeight: 1.1 }}>
              Sistemas a medida, resultados medibles.
            </h2>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: 16 }}>
          {cases.map((c, i) => (
            <div key={i} style={{
              border: `1px solid ${AXIA.border}`, borderRadius: 16, background: 'rgba(15,23,42,0.5)',
              overflow: 'hidden',
              opacity: seen ? 1 : 0, transform: seen ? 'translateY(0)' : 'translateY(16px)',
              transition: `all 700ms ${i * 120}ms cubic-bezier(.2,.7,.3,1)`,
            }}>
              <div style={{
                aspectRatio: '16/10',
                borderBottom: `1px solid ${AXIA.border}`,
                position: 'relative', overflow: 'hidden',
              }}>
                {c.img === 'manufactura' && <CaseImgManufactura />}
                {c.img === 'crm' && <CaseImgCRM />}
                {c.img === 'tracker' && <CaseImgTracker />}
              </div>
              <div style={{ padding: 24 }}>
                {/* BADGE: Escenario representativo */}
                <div style={{
                  display: 'inline-flex',
                  alignItems: 'center',
                  gap: 6,
                  fontFamily: '"JetBrains Mono", monospace',
                  fontSize: 10,
                  color: AXIA.accent,
                  background: 'rgba(16, 185, 129, 0.08)',
                  border: '1px solid rgba(16, 185, 129, 0.2)',
                  padding: '4px 10px',
                  borderRadius: 999,
                  letterSpacing: '0.08em',
                  marginBottom: 16,
                }}>
                  ESCENARIO REPRESENTATIVO
                </div>

                <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 11, color: AXIA.muted, textTransform: 'uppercase', letterSpacing: '0.1em' }}>{c.tag}</div>
                <div style={{ marginTop: 10, fontSize: 17, fontWeight: 600 }}>{c.t}</div>
                <div style={{ marginTop: 8, fontSize: 13, color: AXIA.mutedHi, lineHeight: 1.5 }}>{c.desc}</div>
                <div style={{ marginTop: 20, paddingTop: 16, borderTop: `1px solid ${AXIA.border}`, display: 'flex', alignItems: 'baseline', gap: 10 }}>
                  <span style={{ fontFamily: '"Syne", sans-serif', fontSize: 30, fontWeight: 700, color: AXIA.accent, letterSpacing: '-0.02em', fontVariantNumeric: 'tabular-nums' }}>
                    {c.raw ? c.raw : <Counter value={c.target} prefix={c.prefix} suffix={c.suffix} start={seen} duration={1600} />}
                  </span>
                  <span style={{ fontSize: 12, color: AXIA.mutedHi }}>{c.l}</span>
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* NOTA AL PIE */}
        <p style={{
          fontFamily: '"JetBrains Mono", monospace',
          fontSize: 11,
          color: AXIA.muted,
          textAlign: 'center',
          marginTop: 40,
          letterSpacing: '0.03em',
          lineHeight: 1.6,
        }}>
          Los escenarios anteriores ilustran patrones que vemos en el sector.
          <br />
          Tu implementación se diseña a medida del proceso real de tu operación.
        </p>
      </div>
    </section>
  );
}

// ─── PropBGarantias ─────────────────────────────────────────────────────

function PropBGarantias() {
  const width = useWindowWidth();
  const isMobile = width < 768;
  
  const items = [
    {
      eyebrow: 'SI NO FUNCIONA',
      title: 'Garantía de entrega del primer sistema',
      desc: 'Si al final de las 6 semanas el primer sistema funcional no resuelve el caso de uso acordado, te devolvemos el 100% de lo pagado por implementación. El Mapa de Operación inicial siempre es sin costo, independientemente de si avanzas con nosotros o no.',
      mono: '6 SEMANAS · SISTEMA O REEMBOLSO',
    },
    {
      eyebrow: 'PROPIEDAD',
      title: 'El código y los datos son tuyos',
      desc: 'Repositorio en tu cuenta, base de datos en tu infraestructura, documentación técnica entregada. Si decides cambiar de proveedor, no hay candado del proveedor ni licencias propietarias que te aten.',
      mono: '100% TUYO · SIN CANDADOS',
    },
    {
      eyebrow: 'COSTO',
      title: 'Precio fijo por alcance, no por hora',
      desc: 'El Mapa de Operación define alcance y precio cerrado. Cambios fuera de alcance se cotizan aparte, antes de ejecutar. Sin sorpresas en factura, sin "horas extra" no avisadas.',
      mono: 'PRECIO CERRADO · SIN FACTURACIÓN POR HORA',
    },
  ];

  return (
    <section id="garantias" style={{
      padding: '96px 24px',
      background: AXIA.card,
      borderTop: `1px solid ${AXIA.border}`,
      borderBottom: `1px solid ${AXIA.border}`,
    }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <Eyebrow>CÓMO TRABAJAMOS EL RIESGO</Eyebrow>
        <h2 style={{
          fontFamily: '"Syne", sans-serif',
          fontWeight: 700,
          fontSize: 'clamp(28px, 3.4vw, 44px)',
          color: AXIA.text,
          margin: '16px 0 16px',
          letterSpacing: '-0.02em',
        }}>
          Tres compromisos por escrito.
        </h2>
        <p style={{
          fontFamily: '"Inter", sans-serif',
          fontSize: 17,
          color: AXIA.mutedHi,
          maxWidth: 640,
          margin: '0 0 56px',
          lineHeight: 1.6,
        }}>
          Migrar de Excel a un sistema es una decisión con riesgo real.
          Estos son los compromisos que firmamos en cada propuesta.
        </p>

        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)',
          gap: 20,
        }}>
          {items.map((it, i) => (
            <article key={i} style={{
              background: AXIA.bg,
              border: `1px solid ${AXIA.border}`,
              borderRadius: 12,
              padding: 28,
              position: 'relative',
            }}>
              <div style={{
                fontFamily: '"JetBrains Mono", monospace',
                fontSize: 11,
                color: AXIA.accent,
                letterSpacing: '0.1em',
                marginBottom: 16,
                paddingBottom: 16,
                borderBottom: `1px solid ${AXIA.border}`,
              }}>
                {it.eyebrow}
              </div>

              <h3 style={{
                fontFamily: '"Syne", sans-serif',
                fontWeight: 600,
                fontSize: 20,
                color: AXIA.text,
                margin: '0 0 12px',
                lineHeight: 1.3,
              }}>
                {it.title}
              </h3>

              <p style={{
                fontFamily: '"Inter", sans-serif',
                fontSize: 14,
                color: AXIA.mutedHi,
                lineHeight: 1.65,
                margin: '0 0 20px',
              }}>
                {it.desc}
              </p>

              <div style={{
                fontFamily: '"JetBrains Mono", monospace',
                fontSize: 10,
                color: AXIA.muted,
                letterSpacing: '0.05em',
                paddingTop: 16,
                borderTop: `1px solid ${AXIA.border}`,
              }}>
                {it.mono}
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── PropBCTA — REEMPLAZADO (Mapa de Operación) ─────────────────────────

function PropBCTA() {
  const width = useWindowWidth();
  const isMobile = width < 768;
  
  return (
    <section id="contacto" style={{
      padding: '120px 24px',
      position: 'relative',
      overflow: 'hidden',
    }}>
      <Glow color={AXIA.accent} top="50%" left="20%" size={700} opacity={0.18} />
      <Glow color={AXIA.primary} top="30%" left="80%" size={700} opacity={0.18} />
      <TechGrid opacity={0.22} />

      <div style={{
        maxWidth: 880,
        margin: '0 auto',
        textAlign: 'center',
        position: 'relative',
        zIndex: 1,
      }}>
        <Eyebrow>EMPIEZA AQUÍ</Eyebrow>

        <h2 style={{
          fontFamily: '"Syne", sans-serif',
          fontWeight: 700,
          fontSize: 'clamp(32px, 4.2vw, 52px)',
          color: AXIA.text,
          letterSpacing: '-0.02em',
          lineHeight: 1.1,
          margin: '20px 0 24px',
        }}>
          Mapa de Operación AXIA
        </h2>

        <p style={{
          fontFamily: '"Inter", sans-serif',
          fontSize: 18,
          color: AXIA.mutedHi,
          lineHeight: 1.6,
          maxWidth: 640,
          margin: '0 auto 16px',
        }}>
          Una sesión de <strong style={{ color: AXIA.text }}>60 minutos</strong>,
          sin costo, sobre tu proceso crítico actual.
          Sales con un entregable real, no con un pitch.
        </p>

        <p style={{
          fontFamily: '"Syne", sans-serif',
          fontWeight: 600,
          fontSize: 20,
          color: AXIA.text,
          margin: '24px auto 40px',
          maxWidth: 600,
          lineHeight: 1.4,
          letterSpacing: '-0.01em',
        }}>
          No solo creamos sistemas.{' '}
          <span style={{ color: AXIA.primary }}>Transformamos tu operación.</span>
        </p>

        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)',
          gap: 12,
          maxWidth: 720,
          margin: '0 auto 48px',
          textAlign: 'left',
        }}>
          {[
            { n: '01', t: 'Diagrama de tu proceso actual', d: 'Diagrama claro y visual, listo para compartir con tu equipo.' },
            { n: '02', t: 'Cuellos de botella priorizados', d: 'Lista accionable por impacto y esfuerzo de resolución.' },
            { n: '03', t: 'Estimación de alcance y tiempo', d: 'Si decides avanzar. Si no, te queda igual el mapa.' },
          ].map((item, i) => (
            <div key={i} style={{
              background: AXIA.card,
              border: `1px solid ${AXIA.border}`,
              borderRadius: 10,
              padding: 20,
            }}>
              <div style={{
                fontFamily: '"JetBrains Mono", monospace',
                fontSize: 11,
                color: AXIA.accent,
                marginBottom: 10,
                letterSpacing: '0.05em',
              }}>
                {item.n}
              </div>
              <div style={{
                fontFamily: '"Inter", sans-serif',
                fontSize: 14,
                fontWeight: 600,
                color: AXIA.text,
                marginBottom: 6,
                lineHeight: 1.4,
              }}>
                {item.t}
              </div>
              <div style={{
                fontFamily: '"Inter", sans-serif',
                fontSize: 13,
                color: AXIA.muted,
                lineHeight: 1.55,
              }}>
                {item.d}
              </div>
            </div>
          ))}
        </div>

        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
          <span style={{ display: 'inline-flex' }} onClick={() => pbOpenExternal('https://cal.com/axia-do-mapa')}>
            <BtnPrimary>Agendar Mapa de Operación <ArrowRight /></BtnPrimary>
          </span>
          <span style={{ display: 'inline-flex' }} onClick={() => pbWhatsApp('529933182859', 'Hola, quiero agendar el Mapa de Operación')}>
            <BtnSecondary>WhatsApp</BtnSecondary>
          </span>
        </div>

        <div style={{
          fontFamily: '"JetBrains Mono", monospace',
          fontSize: 11,
          color: AXIA.muted,
          marginTop: 32,
          letterSpacing: '0.05em',
        }}>
          NO ES UNA LLAMADA DE VENTAS · ES TRABAJO REAL ENTREGADO
        </div>
      </div>
    </section>
  );
}

// ─── PropBFAQ — NUEVO ───────────────────────────────────────────────────

function PropBFAQ() {
  const width = useWindowWidth();
  const isMobile = width < 768;
  
  const [open, setOpen] = React.useState(0);

  const faqs = [
    {
      q: '¿Por qué 6 semanas y no 3 meses como otras agencias?',
      a: 'Porque el primer sistema debe resolver UN caso de uso bien delimitado, no toda tu operación de un golpe. En 6 semanas entregamos algo corriendo en producción con tu equipo usándolo. De ahí evolucionamos. Proyectos de 3 a 6 meses sin entregables intermedios son donde fallan la mayoría de las migraciones.',
    },
    {
      q: '¿Qué pasa con mi información actual en Excel y WhatsApp?',
      a: 'Migramos los datos relevantes en la fase de Build. Los Excel históricos quedan como respaldo, los nuevos flujos entran al sistema. WhatsApp puede integrarse como canal de captura o notificación si tu operación lo necesita — no obligamos a abandonar lo que funciona.',
    },
    {
      q: '¿Se conecta con SAP / Contpaq / Bind / mi ERP actual?',
      a: 'En el Mapa de Operación evaluamos qué integraciones necesitas. Trabajamos con APIs estándar, bases de datos SQL, y cuando un sistema es cerrado, con automatizaciones de pantalla o exportaciones programadas. Si una integración no es viable, te lo decimos antes de firmar.',
    },
    {
      q: '¿Qué tecnologías usan?',
      a: 'Tecnologías estándar y bien soportadas: PostgreSQL para datos, Node.js o Python para lógica, React para los paneles, n8n o código directo para automatizaciones. Priorizamos lo que cualquier desarrollador pueda mantener mañana — no software propietario que te ate.',
    },
  ];

  return (
    <section id="faq" style={{
      padding: '96px 24px',
      background: AXIA.bg,
    }}>
      <div style={{ maxWidth: 880, margin: '0 auto' }}>
        <Eyebrow>PREGUNTAS FRECUENTES</Eyebrow>
        <h2 style={{
          fontFamily: '"Syne", sans-serif',
          fontWeight: 700,
          fontSize: isMobile ? '32px' : 'clamp(28px, 3.4vw, 40px)',
          color: AXIA.text,
          margin: '16px 0 48px',
          letterSpacing: '-0.02em',
        }}>
          Lo que nos preguntan antes de firmar.
        </h2>

        <div style={{
          border: `1px solid ${AXIA.border}`,
          borderRadius: 12,
          overflow: 'hidden',
        }}>
          {faqs.map((f, i) => (
            <div key={i} style={{
              borderBottom: i < faqs.length - 1 ? `1px solid ${AXIA.border}` : 'none',
            }}>
              <button
                onClick={() => setOpen(open === i ? -1 : i)}
                style={{
                  width: '100%',
                  background: open === i ? AXIA.card : 'transparent',
                  border: 'none',
                  padding: '24px 28px',
                  textAlign: 'left',
                  cursor: 'pointer',
                  display: 'flex',
                  justifyContent: 'space-between',
                  alignItems: 'center',
                  gap: 24,
                  transition: 'background 200ms',
                  fontFamily: 'inherit',
                  color: 'inherit',
                }}
              >
                <span style={{
                  fontFamily: '"Inter", sans-serif',
                  fontSize: 16,
                  fontWeight: 500,
                  color: AXIA.text,
                  lineHeight: 1.4,
                }}>
                  {f.q}
                </span>
                <span style={{
                  fontFamily: '"JetBrains Mono", monospace',
                  fontSize: 18,
                  color: AXIA.accent,
                  transform: open === i ? 'rotate(45deg)' : 'rotate(0deg)',
                  transition: 'transform 200ms',
                  flexShrink: 0,
                }}>
                  +
                </span>
              </button>
              {open === i && (
                <div style={{
                  padding: '0 28px 24px',
                  fontFamily: '"Inter", sans-serif',
                  fontSize: 15,
                  color: AXIA.mutedHi,
                  lineHeight: 1.65,
                }}>
                  {f.a}
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── PropBFooter — NUEVO (mínimo, solo identity strip) ──────────────────

function PropBFooter() {
  return (
    <footer style={{ background: AXIA.bg }}>
      <div style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        gap: 32,
        flexWrap: 'wrap',
        padding: '24px 24px',
        borderTop: `1px solid ${AXIA.border}`,
        borderBottom: `1px solid ${AXIA.border}`,
        marginBottom: 24,
      }}>
        {[
          'Precisos',
          'Confiables',
          'Innovadores',
          'Orientados a resultados',
          'Cercanos',
        ].map((rasgo, i) => (
          <span key={i} style={{
            fontFamily: '"JetBrains Mono", monospace',
            fontSize: 11,
            color: AXIA.muted,
            letterSpacing: '0.1em',
            textTransform: 'uppercase',
            position: 'relative',
          }}>
            {rasgo}
          </span>
        ))}
      </div>
      <div style={{
        textAlign: 'center',
        padding: '16px 24px 32px',
        fontFamily: '"JetBrains Mono", monospace',
        fontSize: 11,
        color: AXIA.muted,
        letterSpacing: '0.05em',
      }}>
        © AXIA.do · Tabasco · MX
      </div>
    </footer>
  );
}

window.PropB = PropB;