// agents-system.jsx — Agents247, SystemFlow, FeaturesGrid (LIGHT THEME)

function WaveformAnim() {
  return (
    <div style={{ display: 'flex', gap: 3, alignItems: 'flex-end', height: 28, marginTop: 20 }}>
      {[0,1,2,3,4,5,6,7,8].map(i => (
        <div key={i} className="waveform-bar" style={{
          width: 3, borderRadius: 2, background: 'var(--accent)',
          animation: `waveform 1.2s ease-in-out ${i * 0.11}s infinite`,
        }} />
      ))}
    </div>
  );
}

function TypewriterAnim() {
  const [text, setText] = React.useState('');
  const msg = 'Hola, tu cita está confirmada para mañana a las 10:00 AM ✓';

  React.useEffect(() => {
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { setText(msg); return; }
    let cancelled = false;
    (async () => {
      await new Promise(r => setTimeout(r, 600));
      while (!cancelled) {
        for (let i = 0; i <= msg.length && !cancelled; i++) {
          setText(msg.slice(0, i));
          await new Promise(r => setTimeout(r, 42));
        }
        await new Promise(r => setTimeout(r, 3500));
        if (!cancelled) setText('');
        await new Promise(r => setTimeout(r, 800));
      }
    })();
    return () => { cancelled = true; };
  }, []);

  return (
    <div style={{
      marginTop: 20, padding: '10px 14px', borderRadius: 12,
      background: 'rgba(37,211,102,0.06)', border: '1px solid rgba(37,211,102,0.12)',
      fontSize: 13, color: 'rgba(10,10,15,0.55)', minHeight: 42,
      fontFamily: "'General Sans', 'Inter', sans-serif", lineHeight: 1.5,
    }}>
      {text}<span style={{ color: '#25D366', animation: 'blink-cursor 1s step-end infinite' }}>|</span>
    </div>
  );
}

function PulseRingAnim() {
  return (
    <div style={{ position: 'relative', width: 48, height: 48, marginTop: 20 }}>
      {[0, 1, 2].map(i => (
        <div key={i} style={{
          position: 'absolute', inset: 0, borderRadius: '50%',
          border: '1.5px solid var(--accent-a30)',
          animation: `pulse-ring-expand 2.4s ease-out ${i * 0.7}s infinite`,
        }} />
      ))}
      <div style={{
        position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)',
        width: 10, height: 10, borderRadius: '50%', background: 'var(--accent)',
      }} />
    </div>
  );
}

function Agents247() {
  const agents = [
    { tag: 'CONTESTANDO', title: 'Voz · Recepción',
      body: 'Atiende llamadas en segundos, en cualquier idioma. Toma datos, entiende qué necesita el cliente y resuelve sin colgar.',
      Anim: WaveformAnim },
    { tag: 'AGENDANDO', title: 'WhatsApp · Citas',
      body: 'Cierra la cita por chat. Sincroniza con tu calendario, confirma, recuerda y reprograma. Cero llamadas perdidas.',
      Anim: TypewriterAnim },
    { tag: 'LLAMANDO', title: 'Llamadas · Reactivación',
      body: 'Llama y recupera clientes que dejaron de comprar, agenda seguimientos y vuelve a abrir conversaciones frías. Tu agenda nunca se vacía.',
      Anim: PulseRingAnim },
  ];

  return (
    <section id="producto" className="section-pad">
      <div className="section-inner">
        <SectionHeader eyebrow="AGENTES 24/7" title="Tres agentes trabajando para ti, en este momento" />
        <div className="grid-responsive-3">
          {agents.map((a, i) => (
            <RevealOnScroll key={a.tag} delay={i * 120}>
              <div className="dark-card" style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
                  <span className="eyebrow" style={{ fontSize: 10 }}>{a.tag}</span>
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 10, fontWeight: 700, color: '#14B870', letterSpacing: '0.06em' }}>
                    <span className="live-dot" /> LIVE
                  </span>
                </div>
                <h3 style={{ fontFamily: "'Cabinet Grotesk', 'Urbanist', sans-serif", fontWeight: 700, fontSize: 22, color: '#0A0A0F' }}>{a.title}</h3>
                <p style={{ fontSize: 15, color: 'rgba(10,10,15,0.50)', lineHeight: 1.6, marginTop: 10, flex: 1 }}>{a.body}</p>
                <a.Anim />
              </div>
            </RevealOnScroll>
          ))}
        </div>
      </div>
    </section>
  );
}

function SystemFlow() {
  const channels = [
    { icon: 'phone', label: 'Llamada de voz' },
    { icon: 'message-circle', label: 'WhatsApp Business' },
    { icon: 'globe', label: 'Web chat' },
    { icon: 'mail', label: 'SMS / email' },
  ];
  const actions = [
    { icon: 'calendar', label: 'Agenda en tu calendario' },
    { icon: 'clipboard-list', label: 'Crea ticket en tu CRM' },
    { icon: 'send', label: 'Envía cotización por WA' },
    { icon: 'users', label: 'Escala a tu equipo' },
  ];
  const listStyle = { display: 'flex', alignItems: 'center', gap: 12, fontSize: 14, color: 'rgba(10,10,15,0.58)' };

  return (
    <section className="section-pad">
      <div className="section-inner">
        <SectionHeader title="El diagrama del sistema"
          sub="Conecta canales, instala agentes con tu personalidad, y ellos ejecutan acciones en tus herramientas. Tú solo defines la lógica del negocio" />
        <RevealOnScroll>
          <div className="system-flow-grid">
            <div className="dark-card">
              <div className="eyebrow" style={{ fontSize: 10, marginBottom: 20 }}>CANALES</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                {channels.map(c => (
                  <div key={c.label} style={listStyle}>
                    <i data-lucide={c.icon} style={{ width: 16, height: 16, color: 'var(--accent)', flexShrink: 0 }}></i>
                    {c.label}
                  </div>
                ))}
              </div>
            </div>
            <div className="flow-connector"><div className="flow-line" /></div>
            <div style={{
              position: 'relative', borderRadius: 'var(--card-radius, 20px)', padding: 32,
              background: 'linear-gradient(145deg, var(--accent-a12), rgba(124,92,255,0.05))',
              border: '1px solid var(--accent-a25)',
              textAlign: 'center', display: 'flex', flexDirection: 'column', justifyContent: 'center', overflow: 'hidden',
            }}>
              <div style={{ position: 'absolute', inset: '-40%', background: 'radial-gradient(circle, var(--accent-a08), transparent 55%)', pointerEvents: 'none' }} />
              <div style={{ position: 'relative' }}>
                <div className="eyebrow" style={{ fontSize: 10, marginBottom: 14 }}>NÚCLEO DE IA</div>
                <h3 style={{ fontFamily: "'Cabinet Grotesk', 'Urbanist', sans-serif", fontWeight: 800, fontSize: 'clamp(22px, 2.4vw, 28px)', color: '#0A0A0F' }}>Agente ALVEX</h3>
                <p style={{ fontSize: 14, color: 'rgba(10,10,15,0.50)', lineHeight: 1.55, marginTop: 12 }}>
                  Entiende intención, recuerda contexto y decide la siguiente acción.
                </p>
              </div>
            </div>
            <div className="flow-connector"><div className="flow-line" /></div>
            <div className="dark-card">
              <div className="eyebrow" style={{ fontSize: 10, marginBottom: 20 }}>ACCIONES</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                {actions.map(a => (
                  <div key={a.label} style={listStyle}>
                    <i data-lucide={a.icon} style={{ width: 16, height: 16, color: '#7C5CFF', flexShrink: 0 }}></i>
                    {a.label}
                  </div>
                ))}
              </div>
            </div>
          </div>
        </RevealOnScroll>
      </div>
    </section>
  );
}

// === Feature cell visuals (one per bento cell, no two repeat) =====================

function VizWaveformSmall() {
  return (
    <div style={{ display: 'flex', alignItems: 'flex-end', gap: 3, height: 36, marginTop: 'auto' }}>
      {[8, 14, 22, 10, 28, 18, 32, 14, 24, 12, 20, 8].map((h, i) => (
        <div key={i} style={{
          width: 3, height: h, borderRadius: 1.5, background: 'var(--accent)',
          opacity: 0.7,
          animation: `waveform 1.4s ease-in-out ${i * 0.08}s infinite`,
        }} />
      ))}
    </div>
  );
}

function VizLanguageChips() {
  const langs = [
    { label: 'Español', accent: true },
    { label: 'English' },
    { label: 'Português' },
    { label: 'Français' },
    { label: 'Italiano' },
    { label: 'Deutsch' },
    { label: '日本語' },
    { label: '한국어' },
    { label: '中文' },
    { label: 'العربية' },
    { label: 'हिन्दी' },
    { label: 'Türkçe' },
    { label: 'Polski' },
    { label: '+38 más', muted: true },
  ];
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 'auto' }}>
      {langs.map(l => (
        <span key={l.label} style={{
          padding: '7px 14px', borderRadius: 999,
          fontSize: 13, fontWeight: 500,
          background: l.accent ? 'var(--accent)' : 'rgba(10,10,15,0.04)',
          color: l.accent ? '#fff' : (l.muted ? 'rgba(10,10,15,0.38)' : 'rgba(10,10,15,0.65)'),
          border: l.accent ? 'none' : '1px solid rgba(10,10,15,0.06)',
        }}>{l.label}</span>
      ))}
    </div>
  );
}

function VizActionLog() {
  const events = [
    { time: '10:42', text: 'Cita agendada con María L.', tone: 'success' },
    { time: '11:15', text: 'Cobro $89.00 procesado', tone: 'accent' },
    { time: '11:33', text: 'Email de confirmación enviado', tone: 'neutral' },
    { time: '11:47', text: 'Recordatorio WhatsApp programado', tone: 'success' },
  ];
  const tones = {
    success: '#14B870',
    accent: 'var(--accent)',
    neutral: 'rgba(10,10,15,0.40)',
  };
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 0, marginTop: 'auto' }}>
      {events.map((ev, i) => (
        <div key={i} style={{
          display: 'flex', alignItems: 'center', gap: 12,
          padding: '10px 0',
          borderTop: i === 0 ? 'none' : '1px solid rgba(10,10,15,0.06)',
        }}>
          <span style={{
            fontSize: 10.5, color: 'rgba(10,10,15,0.35)',
            fontFamily: "'JetBrains Mono', monospace", minWidth: 38, letterSpacing: '0.04em',
          }}>{ev.time}</span>
          <span style={{
            width: 5, height: 5, borderRadius: '50%',
            background: tones[ev.tone], flexShrink: 0,
          }}></span>
          <span style={{ fontSize: 13, color: 'rgba(10,10,15,0.65)' }}>{ev.text}</span>
        </div>
      ))}
    </div>
  );
}

function VizHandoff() {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      gap: 12, marginTop: 'auto', padding: '12px 0',
    }}>
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        width: 44, height: 44, borderRadius: '50%',
        background: 'var(--accent-a12)', color: 'var(--accent)',
        fontSize: 18, fontWeight: 700,
        fontFamily: "'Cabinet Grotesk', 'Outfit', sans-serif",
      }}>A</div>
      <div style={{
        flex: 1, height: 2, position: 'relative',
        background: 'rgba(10,10,15,0.08)', borderRadius: 1,
      }}>
        <div style={{
          position: 'absolute', left: 0, top: 0, bottom: 0, width: '50%',
          background: 'linear-gradient(90deg, var(--accent), rgba(124,92,255,0.6))',
          borderRadius: 1,
        }}></div>
      </div>
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        width: 44, height: 44, borderRadius: '50%',
        background: 'rgba(124,92,255,0.12)', color: '#7C5CFF',
        fontSize: 14, fontWeight: 600,
        fontFamily: "'General Sans', 'Inter', sans-serif",
      }}>Tú</div>
    </div>
  );
}

function VizMemoryTimeline() {
  const items = [
    { date: 'Ene 12', label: 'Primera llamada' },
    { date: 'Feb 03', label: 'Cita reagendada' },
    { date: 'Hoy', label: 'Reserva confirmada', active: true },
  ];
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 0, marginTop: 'auto' }}>
      {items.map((it, i) => (
        <div key={i} style={{
          display: 'flex', alignItems: 'center', gap: 12,
          padding: '8px 0',
          borderTop: i === 0 ? 'none' : '1px dashed rgba(10,10,15,0.08)',
        }}>
          <span style={{
            width: 7, height: 7, borderRadius: '50%',
            background: it.active ? 'var(--accent)' : 'rgba(10,10,15,0.20)',
            boxShadow: it.active ? '0 0 0 3px var(--accent-a15)' : 'none',
            flexShrink: 0,
          }}></span>
          <span style={{
            fontSize: 11, color: 'rgba(10,10,15,0.40)',
            fontFamily: "'JetBrains Mono', monospace", minWidth: 50, letterSpacing: '0.02em',
          }}>{it.date}</span>
          <span style={{
            fontSize: 13, color: it.active ? 'rgba(10,10,15,0.85)' : 'rgba(10,10,15,0.55)',
            fontWeight: it.active ? 600 : 400,
          }}>{it.label}</span>
        </div>
      ))}
    </div>
  );
}

function VizBeforeAfter() {
  const rows = [
    { label: 'Horario',         before: '9 a 18h',     after: '24/7' },
    { label: 'Idiomas',         before: '1',           after: '50+' },
    { label: 'Tiempo respuesta',before: '4 horas',     after: '2 segundos' },
    { label: 'Sin responder',   before: '47%',         after: '0%' },
  ];

  const headerCell = {
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: 10,
    letterSpacing: '0.16em',
    textTransform: 'uppercase',
    color: 'rgba(10,10,15,0.38)',
  };

  return (
    <div style={{ marginTop: 'auto', display: 'flex', flexDirection: 'column' }}>
      {/* Header row */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: '1.3fr 1fr 1fr',
        gap: 16,
        padding: '0 0 12px 0',
        borderBottom: '1px solid rgba(10,10,15,0.10)',
      }}>
        <span style={headerCell}>Métrica</span>
        <span style={{ ...headerCell, textAlign: 'right' }}>Antes</span>
        <span style={{ ...headerCell, textAlign: 'right', color: 'var(--accent)' }}>Con ALVEX</span>
      </div>

      {/* Data rows */}
      {rows.map((r, i) => (
        <div key={r.label} style={{
          display: 'grid',
          gridTemplateColumns: '1.3fr 1fr 1fr',
          gap: 16,
          alignItems: 'center',
          padding: '14px 0',
          borderBottom: i < rows.length - 1 ? '1px solid rgba(10,10,15,0.05)' : 'none',
        }}>
          <span style={{
            fontSize: 14, color: 'rgba(10,10,15,0.72)',
            fontWeight: 500,
          }}>{r.label}</span>
          <span style={{
            fontSize: 14, color: 'rgba(10,10,15,0.38)',
            textAlign: 'right',
            fontFamily: "'Cabinet Grotesk', 'Outfit', sans-serif",
            fontWeight: 500,
          }}>{r.before}</span>
          <span style={{
            fontSize: 16, color: 'var(--accent)',
            textAlign: 'right',
            fontWeight: 700,
            fontFamily: "'Cabinet Grotesk', 'Outfit', sans-serif",
            letterSpacing: '-0.01em',
          }}>{r.after}</span>
        </div>
      ))}
    </div>
  );
}

// === BentoCard (kokonut-ui port, ALVEX colors, light theme) ====================

// Inline Lucide-style icons (stroke 1.8, 17px)
function PhoneCallIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
      <path d="M14.05 2a9 9 0 0 1 8 7.94"/>
      <path d="M14.05 6A5 5 0 0 1 18 10"/>
    </svg>
  );
}
function LanguagesIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="m5 8 6 6"/><path d="m4 14 6-6 2-3"/><path d="M2 5h12"/><path d="M7 2h1"/>
      <path d="m22 22-5-10-5 10"/><path d="M14 18h6"/>
    </svg>
  );
}
function ZapIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
    </svg>
  );
}
function HandoffIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
      <circle cx="9" cy="7" r="4"/>
      <path d="M22 11h-6"/>
      <path d="m19 8 3 3-3 3"/>
    </svg>
  );
}
function BrainIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z"/>
      <path d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z"/>
      <path d="M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4"/>
      <path d="M17.5 16a3.5 3.5 0 0 0 0-7"/>
      <path d="M6.5 16a3.5 3.5 0 0 1 0-7"/>
    </svg>
  );
}
function TrendingUpIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/>
      <polyline points="16 7 22 7 22 13"/>
    </svg>
  );
}

function BentoCard({ item, delay }) {
  const Icon = item.Icon;
  const persistent = item.hasPersistentHover;
  return (
    <RevealOnScroll delay={delay} className={item.colSpan === 2 ? 'fb-w2' : ''}>
      <div className={`bento-card${persistent ? ' persistent-hover' : ''}`}>
        <div className="bento-dot-overlay" />
        <div className="bento-gradient-edge" />
        <div className="bento-card-content">
          <div className="bento-header">
            <div className="bento-icon-wrap"><Icon /></div>
            <span className="bento-status">{item.status || 'Activo'}</span>
          </div>
          <div>
            <h3 className="bento-title">
              {item.title}
              {item.meta && <span className="bento-meta">{item.meta}</span>}
            </h3>
            <p className="bento-description" style={{ marginTop: 8 }}>{item.description}</p>
          </div>
          <div className="bento-footer">
            <div className="bento-tags">
              {item.tags && item.tags.map(t => <span key={t} className="bento-tag">#{t}</span>)}
            </div>
            <span className="bento-cta">{item.cta || 'Ver más →'}</span>
          </div>
        </div>
      </div>
    </RevealOnScroll>
  );
}

// Legacy FeatureCell (kept for compat in case anything else imports it; not rendered)
function FeatureCell({ span, eyebrow, title, body, Viz, accent = false, variant = 'default', delay = 0 }) {
  const variants = {
    default: {
      background: 'rgba(255,255,255,0.72)',
      borderColor: 'rgba(10,10,15,0.07)',
      overlay: null,
    },
    accent: {
      background: 'linear-gradient(180deg, var(--accent-a08), rgba(255,255,255,0.6))',
      borderColor: 'var(--accent-a25)',
      overlay: null,
    },
    violet: {
      background: 'linear-gradient(160deg, rgba(124,92,255,0.08) 0%, rgba(255,255,255,0.7) 60%)',
      borderColor: 'rgba(124,92,255,0.20)',
      overlay: null,
    },
    grid: {
      background: 'rgba(10,10,15,0.025)',
      borderColor: 'rgba(10,10,15,0.10)',
      overlay: 'grid',
    },
  };
  // Backwards compat: accent prop keeps working
  const v = accent ? variants.accent : variants[variant] || variants.default;
  return (
    <RevealOnScroll delay={delay} className={span === 2 ? 'fb-w2' : ''}>
      <div style={{
        position: 'relative',
        height: '100%',
        background: v.background,
        backdropFilter: 'blur(16px)',
        WebkitBackdropFilter: 'blur(16px)',
        border: `1px solid ${v.borderColor}`,
        borderRadius: 'var(--card-radius, 20px)',
        padding: 28,
        display: 'flex', flexDirection: 'column',
        boxShadow: '0 2px 8px rgba(10,10,15,0.03)',
        transition: 'border-color 200ms ease, transform 200ms ease',
        minHeight: 280,
        overflow: 'hidden',
      }}>
        {v.overlay === 'grid' && (
          <div style={{
            position: 'absolute', inset: 0,
            backgroundImage: 'linear-gradient(rgba(10,10,15,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(10,10,15,0.04) 1px, transparent 1px)',
            backgroundSize: '24px 24px',
            pointerEvents: 'none',
            maskImage: 'radial-gradient(ellipse at 80% 100%, rgba(0,0,0,0.7), transparent 70%)',
            WebkitMaskImage: 'radial-gradient(ellipse at 80% 100%, rgba(0,0,0,0.7), transparent 70%)',
            zIndex: 0,
          }} />
        )}
        <div style={{ position: 'relative', zIndex: 1, display: 'flex', flexDirection: 'column', height: '100%' }}>
          <div style={{
            fontSize: 10.5, fontWeight: 600,
            color: 'var(--accent)',
            letterSpacing: '0.20em', textTransform: 'uppercase',
            fontFamily: "'General Sans', 'Inter', sans-serif",
            marginBottom: 14,
          }}>{eyebrow}</div>
          <h3 style={{
            fontFamily: "'Cabinet Grotesk', 'Outfit', sans-serif", fontWeight: 700,
            fontSize: span === 2 ? 'clamp(22px, 2.4vw, 28px)' : 'clamp(19px, 1.9vw, 22px)',
            color: '#0A0A0F', lineHeight: 1.18,
            letterSpacing: '-0.01em',
            marginBottom: 10,
          }}>{title}</h3>
          <p style={{
            fontSize: 14, color: 'rgba(10,10,15,0.55)',
            lineHeight: 1.55, marginBottom: 24,
            maxWidth: span === 2 ? 440 : 280,
          }}>{body}</p>
          <Viz />
        </div>
      </div>
    </RevealOnScroll>
  );
}

function FeaturesGrid() {
  return (
    <section className="section-pad">
      <div className="section-inner">
        <SectionHeader eyebrow="Piezas combinables" title="Capacidades que se integran como bloques"
          sub="Cada agente combina estos módulos según lo que tu negocio necesita. Activas, ajustas, publicas" />

        {/* Bento Pattern A: rows alternating 1fr+2fr / 2fr+1fr / 1fr+2fr.
            Each cell has a unique visual to break "6 identical cards" cliché. */}
        <div className="features-bento">
          {/* Row 1 */}
          <FeatureCell span={1} delay={0}
            eyebrow="Agentes de voz"
            title="Atienden, llaman y suenan humanos"
            body="Reciben llamadas, llaman para confirmar citas y hacen seguimiento. Voz natural, sin acento robótico ni pausas raras. Tu cliente no nota la diferencia."
            Viz={VizWaveformSmall} />
          <FeatureCell span={2} delay={80} variant="violet"
            eyebrow="Idiomas"
            title="50+ idiomas, sin configurar nada"
            body="Tu cliente escribe en su idioma. El agente lo detecta y responde igual. Sin configuración manual."
            Viz={VizLanguageChips} />

          {/* Row 2 */}
          <FeatureCell span={2} delay={160} accent
            eyebrow="Acciones"
            title="No solo conversa. Ejecuta"
            body="Agenda en tu calendario, dispara cobros, envía recordatorios. Todo registrado, todo automático."
            Viz={VizActionLog} />
          <FeatureCell span={1} delay={240}
            eyebrow="Handoff"
            title="Te pasa la pelota"
            body="Cuando el caso necesita humano, pasa la conversación con todo el contexto."
            Viz={VizHandoff} />

          {/* Row 3 */}
          <FeatureCell span={1} delay={320}
            eyebrow="Memoria"
            title="Recuerda a cada cliente"
            body="No tiene que repetirse nunca. El agente conoce su historia."
            Viz={VizMemoryTimeline} />
          <FeatureCell span={2} delay={400} variant="grid"
            eyebrow="El cambio"
            title="Antes y después de ALVEX"
            body="Lo que pasa con tu atención al cliente desde el día 1."
            Viz={VizBeforeAfter} />
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Agents247, SystemFlow, FeaturesGrid });