// ── BIVIA ─────────────────────────────────────────────────
function QueBivia() {
  const container = useRef(null);

  useEffect(() => {
    let ctx = gsap.context(() => {

      // ── Portal reveal: letras BIVIA + headline + sub + pillars ─────────────
      // Se activan en cuanto la sección entra al viewport (justo tras pasar el portal)
      const revealTl = gsap.timeline({
        scrollTrigger: {
          trigger: container.current,
          start: 'top 92%',
          toggleActions: 'play none none none',
        },
      });

      revealTl
        .fromTo('.portal-letter',
          { opacity: 0, y: 28, scale: 0.84 },
          { opacity: 1, y: 0, scale: 1, duration: 0.55, ease: 'back.out(1.4)', stagger: 0.09 },
          0
        )
        .fromTo('.portal-display-grid',
          { x: 48, opacity: 0 },
          { x: 0, opacity: 1, duration: 0.9, ease: 'power3.out' },
          0.2
        );

      // ── Headline: word-by-word scroll scrub ──────────────────────────────
      gsap.fromTo('.portal-word',
        { opacity: 0 },
        {
          opacity: 1,
          ease: 'none',
          stagger: { each: 0.14, from: 'start' },
          scrollTrigger: {
            trigger: '.portal-reveal',
            start: 'top 75%',
            end: 'top 5%',
            scrub: 1.5,
          },
        }
      );

      // ── Resto de la sección ───────────────────────────────────────────────
      gsap.fromTo('.section-label-bivia', { y: 20, opacity: 0 }, { scrollTrigger: { trigger: '.section-label-bivia', start: 'top 85%' }, y: 0, opacity: 1, duration: 0.8, ease: 'power3.out' });
      gsap.fromTo('.bivia-headline', { y: 30, opacity: 0 }, { scrollTrigger: { trigger: '.bivia-headline', start: 'top 85%' }, y: 0, opacity: 1, duration: 0.8, ease: 'power3.out' });
      gsap.fromTo('.bivia-desc', { y: 30, opacity: 0 }, { scrollTrigger: { trigger: '.bivia-desc', start: 'top 85%' }, y: 0, opacity: 1, duration: 0.8, ease: 'power3.out' });
      gsap.fromTo('.bivia-stat-item', { y: 30, opacity: 0 }, { scrollTrigger: { trigger: '.bivia-stat-item', start: 'top 85%' }, y: 0, opacity: 1, duration: 0.8, stagger: 0.15, ease: 'power3.out' });

      const pillars = gsap.utils.toArray('.bivia-pillar');
      pillars.forEach((pillar, i) => {
        gsap.fromTo(pillar,
          { x: 40, opacity: 0 },
          { scrollTrigger: { trigger: pillar, start: 'top 90%' }, x: 0, opacity: 1, duration: 0.8, ease: 'power3.out', delay: i * 0.15 }
        );
      });
    }, container);
    return () => ctx.revert();
  }, []);

  const pillars = [
    { n: '01', t: 'Diagnóstico', d: 'Mapeamos la operación completa antes de diseñar nada: flujos, herramientas, dependencias, fricciones y puntos de quiebre. El diagnóstico define qué construir, en qué orden y con qué propósito.' },
    { n: '02', t: 'Arquitectura', d: 'Con base en el diagnóstico, definimos la estructura: qué sistemas construir, cómo conectarlos y qué lógica operacional debe sostener el ecosistema digital completo.' },
    { n: '03', t: 'Ejecución', d: 'Construimos lo que diseñamos. Implementamos, integramos y operamos. Cada decisión técnica está subordinada a la lógica del negocio — no al revés.' },
  ];
  const headline = ['Las empresas modernas', 'no se construyen', 'con herramientas.', 'Se construyen con sistemas.'];

  return (
    <section id="bivia" ref={container}>

      {/* ── Portal reveal — primer elemento visible tras pasar el portal ── */}
      <div className="portal-reveal">

        {/* Left column — logo + headline */}
        <div className="portal-reveal-left">
          <div className="portal-letters" style={{ marginBottom: '36px' }}>
            <img
              className="portal-letter"
              src="Branding/Bivia_logo_blanco_png.png"
              alt="BIVIA"
              style={{ height: '72px', width: 'auto', display: 'block' }}
            />
          </div>
          <h1 className="portal-headline">
            {headline.map((line, i) => (
              <span className="portal-line" key={i}>
                <span className="portal-line-inner">
                  {line.split(' ').map((word, j, arr) => (
                    <span key={j} className="portal-word">
                      {word}{j < arr.length - 1 ? ' ' : ''}
                    </span>
                  ))}
                </span>
              </span>
            ))}
            <span className="portal-line">
              <span className="portal-line-inner portal-olive">
                {'BIVIA diseña esos sistemas.'.split(' ').map((word, j, arr) => (
                  <span key={j} className="portal-word">
                    {word}{j < arr.length - 1 ? ' ' : ''}
                  </span>
                ))}
              </span>
            </span>
          </h1>
        </div>

        {/* Right column — stacked display cards */}
        <div className="portal-reveal-right">
          <div className="portal-display-grid">
            {[
              { Icon: IconDiagnostico, title: 'Diagnóstico', desc: 'Mapeamos tu operación antes de diseñar nada.', step: '01 · Análisis' },
              { Icon: IconSistemas, title: 'Sistemas', desc: 'Construimos la arquitectura de tu negocio.', step: '02 · Diseño' },
              { Icon: IconIntegracion, title: 'Integración', desc: 'Conectamos tus herramientas en un ecosistema.', step: '03 · Ejecución' },
            ].map(({ Icon, title, desc, step }) => (
              <div key={title} className="portal-display-card">
                <div>
                  <span className="pdc-icon-badge"><Icon /></span>
                  <p className="pdc-title">{title}</p>
                </div>
                <p className="pdc-desc">{desc}</p>
                <p className="pdc-step">{step}</p>
              </div>
            ))}
          </div>
        </div>

      </div>

      <BentoBivia />


      <div className="bivia-grid">
        <div>
          <h2 className="bivia-headline">
            Diseñamos la infraestructura<br />que ordena operaciones<br /><em>complejas en sistemas claros.</em>
          </h2>
          <p className="bivia-desc">
            Entendemos cómo funciona un negocio desde dentro: sus procesos, sus fricciones, su información y su lógica de crecimiento. A partir de ese diagnóstico, construimos la arquitectura digital que lo hace operar con orden y precisión.
          </p>
          <div className="bivia-stats-row" style={{ display: 'flex', gap: '32px' }}>
            {[
              { v: '100+', l: 'Sistemas diseñados' },
              { v: '3+', l: 'Años de operación' },
              { v: '94%', l: 'Retención de clientes' },
            ].map(s => (
              <div key={s.l} className="bivia-stat-item">
                <div style={{ fontFamily: 'Sora,sans-serif', fontSize: '32px', fontWeight: '700', color: '#C8B895', letterSpacing: '-0.02em' }}>{s.v}</div>
                <div style={{ fontSize: '11px', color: 'var(--stone)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>
        <BiviaSystemMockup />
      </div>
    </section>
  );
}