// Bloque 10 — TRANSFER: 4 fases visualizadas como diagrama de disminución OMNIX / crecimiento CLIENTE
const HomeTransfer = () => {
  const phases = [
    { k: 'ASSESSMENT',    omnix: 90, client: 10, desc: 'OMNIX diagnostica, mapea, prioriza casos.' },
    { k: 'PILOTO',        omnix: 70, client: 30, desc: 'Modelo entrenado. Cliente co-opera bajo mentoría.' },
    { k: 'ESCALAMIENTO',  omnix: 45, client: 55, desc: 'Ingenieros del cliente certificados. Casos nuevos autónomos.' },
    { k: 'TRANSFERENCIA', omnix: 15, client: 85, desc: 'OMNIX se retira operacionalmente. Soporte a demanda.' },
  ];
  return (
    <section style={{ background: '#000', color: '#FFF', paddingTop: 128, paddingBottom: 128 }}>
      <Container>
        <div style={{ marginBottom: 72, maxWidth: 880 }}>
          <Reveal>
            <SectionMeta n="07" label="Transferencia de control" dark color="#F4024C"/>
          </Reveal>
          <Reveal delay={80}>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 64, lineHeight: 1, letterSpacing: '-0.03em', margin: '0 0 24px', color: '#FFF' }}>
              Construimos, operamos y te <span style={{ color: '#F4024C' }}>entregamos las llaves</span>.
            </h2>
          </Reveal>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 20, lineHeight: 1.5, color: '#96A3B5', margin: 0, maxWidth: 720 }}>
              Ningún competidor grande dice esto: OMNIX se retira operacionalmente cuando tu equipo
              puede tomar control. Sin candados. Sin dependencias. Sin propuesta comercial de renovación.
            </p>
          </Reveal>
        </div>

        {/* Diagrama de disminución/incremento */}
        <Reveal delay={200} y={0}>
          <div style={{ border: '1.5px solid #2E3140', background: '#0A0B10' }}>
            {/* Header */}
            <div style={{
              display: 'flex', justifyContent: 'space-between', padding: '14px 24px',
              borderBottom: '1.5px solid #2E3140',
              fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#96A3B5',
            }}>
              <span>ROLE DISTRIBUTION · OMNIX × CLIENT</span>
              <span>4 PHASES</span>
            </div>
            <div style={{ padding: '48px 32px' }}>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32 }}>
                {phases.map((p, i) => (
                  <div key={p.k}>
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#F4024C', marginBottom: 8 }}>
                      FASE {i + 1}
                    </div>
                    <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, letterSpacing: '-0.01em', color: '#FFF', marginBottom: 20 }}>
                      {p.k}
                    </div>
                    {/* Barra apilada vertical */}
                    <TransferBar omnix={p.omnix} client={p.client}/>
                    {/* Etiquetas */}
                    <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 12, fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.1em', color: '#96A3B5', textTransform: 'uppercase' }}>
                      <span><span style={{ color: '#F4024C' }}>■</span> OMNIX {p.omnix}%</span>
                      <span><span style={{ color: '#0050BD' }}>■</span> CLIENT {p.client}%</span>
                    </div>
                    <div style={{ marginTop: 16, fontFamily: 'var(--font-body)', fontSize: 13, color: '#96A3B5', lineHeight: 1.5 }}>
                      {p.desc}
                    </div>
                  </div>
                ))}
              </div>
            </div>
            {/* Footer con flecha */}
            <div style={{
              borderTop: '1.5px solid #2E3140', padding: '20px 24px',
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', color: '#96A3B5', textTransform: 'uppercase',
            }}>
              <span>OMNIX operates →</span>
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 13, color: '#F4024C', letterSpacing: '0.06em' }}>
                → CLIENT OWNS
              </span>
            </div>
          </div>
        </Reveal>
      </Container>
    </section>
  );
};

// Barra apilada vertical animada
const TransferBar = ({ omnix, client }) => {
  const { ref, visible } = useReveal({ threshold: 0.3 });
  return (
    <div ref={ref} style={{
      height: 220, width: '100%', border: '1px solid #2E3140', background: '#000',
      display: 'flex', flexDirection: 'column', position: 'relative',
    }}>
      <div style={{
        background: '#F4024C', height: visible ? `${omnix}%` : '0%',
        transition: 'height 900ms cubic-bezier(0.2,0.7,0.2,1)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        {visible && omnix > 20 && (
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#FFF', letterSpacing: '0.14em' }}>{omnix}</span>
        )}
      </div>
      <div style={{
        background: '#0050BD', height: visible ? `${client}%` : '0%',
        transition: 'height 900ms cubic-bezier(0.2,0.7,0.2,1) 200ms',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        {visible && client > 20 && (
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#FFF', letterSpacing: '0.14em' }}>{client}</span>
        )}
      </div>
    </div>
  );
};

Object.assign(window, { HomeTransfer });