/* global React, LR_IMAGES, gsap, ScrollTrigger */

function Services() {
  const t = window.useT();
  const sectionRef = React.useRef(null);

  React.useLayoutEffect(() => {
    if (!window.gsap || !window.ScrollTrigger) return;
    gsap.registerPlugin(ScrollTrigger);
    const ctx = gsap.context(() => {
      const common = { invalidateOnRefresh: true };

      gsap.set('.services-header > *', { y: 28, autoAlpha: 0 });
      gsap.set('.services-lede', { y: 20, autoAlpha: 0 });
      gsap.set('.services-disc-cell', { y: 24, autoAlpha: 0 });
      gsap.set('.services-disc-img', { scale: 1.08 });

      gsap.to('.services-header > *', {
        y: 0, autoAlpha: 1, duration: 0.7, ease: 'expo.out', stagger: 0.08,
        scrollTrigger: { trigger: '.services-header', start: 'top 95%', once: true, ...common },
      });
      gsap.to('.services-lede', {
        y: 0, autoAlpha: 1, duration: 0.6, ease: 'expo.out',
        scrollTrigger: { trigger: '.services-lede', start: 'top 95%', once: true, ...common },
      });
      gsap.to('.services-disc-cell', {
        y: 0, autoAlpha: 1, duration: 0.7, ease: 'expo.out', stagger: 0.08,
        scrollTrigger: { trigger: '.services-disc-grid', start: 'top 92%', once: true, ...common },
      });
      gsap.to('.services-disc-img', {
        scale: 1.0, duration: 1.25, ease: 'power3.out', stagger: 0.08,
        scrollTrigger: { trigger: '.services-disc-grid', start: 'top 92%', once: true, ...common },
      });

      // Safety: refresh after fonts/images settle
      ScrollTrigger.refresh();
      setTimeout(() => ScrollTrigger.refresh(), 600);
    }, sectionRef);
    return () => ctx.revert();
  }, []);

  const disciplines = [
    { n: '01', title: t('capabilities.block0.title'), bullets: [t('capabilities.block0.bullets.0'), t('capabilities.block0.bullets.1'), t('capabilities.block0.bullets.2'), t('capabilities.block0.bullets.3')].filter(Boolean), src: 'images/services/02-visualizacion.jpg' },
    { n: '02', title: t('capabilities.block1.title'), bullets: [t('capabilities.block1.bullets.0'), t('capabilities.block1.bullets.1'), t('capabilities.block1.bullets.2'), t('capabilities.block1.bullets.3')].filter(Boolean), src: 'images/services/01-captacion.jpg' },
  ];

  return (
    <section ref={sectionRef} id="servicios" data-screen-label="02 Servicios" className="services-section" style={{
      background: 'var(--lr-cal-blanca)',
      padding: 'clamp(48px, 4vw, 80px) clamp(24px, 4vw, 56px) clamp(48px, 4vw, 80px)',
      borderTop: '1px solid var(--border-subtle)',
    }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        {/* Header */}
        <div className="services-header" style={{
          display: 'grid', gridTemplateColumns: '320px 1fr',
          gap: 64, alignItems: 'flex-end', marginBottom: 'clamp(24px, 2.4vw, 40px)',
        }}>
          <div>
            <div style={{
              fontFamily: 'var(--font-ui)', fontWeight: 700, fontSize: 11,
              letterSpacing: '0.32em', textTransform: 'uppercase',
              color: 'var(--lr-terracota)', marginBottom: 16,
            }}>{t('services.header.label')}</div>
          </div>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 400,
            fontSize: 'clamp(30px, 3.4vw, 48px)', lineHeight: 1.08,
            letterSpacing: '-0.022em',
            color: 'var(--lr-tierra-profunda)', margin: 0, maxWidth: 1100,
          }}>
            {t('services.header.title')}
            {' '}<em style={{
              fontFamily: 'var(--font-italic)', fontStyle: 'italic',
              color: 'var(--lr-terracota)',
            }}>{t('services.header.subtitle')}</em>
          </h2>
        </div>

        {/* Disciplines — texto arriba e imagen debajo */}
        <div className="services-disc-grid" style={{
          display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
          borderTop: '1px solid rgba(61, 53, 48, 0.22)',
        }}>
          {disciplines.map((d, i) => {
            return (
              <div key={i} className="services-disc-cell" style={{
                padding: 'clamp(26px, 2.2vw, 40px) clamp(16px, 1.4vw, 24px) clamp(22px, 1.8vw, 32px)',
                borderRight: i < disciplines.length - 1 ? '1px solid rgba(61, 53, 48, 0.18)' : 'none',
                display: 'flex', flexDirection: 'column',
                transition: 'background 360ms cubic-bezier(0.16,1,0.3,1)',
              }}>
                <div className="services-disc-num" style={{
                  fontFamily: 'var(--font-display)', fontSize: 'clamp(40px, 3.6vw, 56px)',
                  fontWeight: 400, lineHeight: 1, letterSpacing: '-0.02em',
                  color: 'var(--lr-terracota)', marginBottom: 'clamp(18px, 1.6vw, 28px)',
                }}>{d.n}</div>
                <h3 style={{
                  fontFamily: 'var(--font-ui)', fontWeight: 700, fontSize: 12,
                  letterSpacing: '0.28em', textTransform: 'uppercase',
                  color: 'var(--lr-tierra-profunda)', margin: '0 0 18px',
                }}>{d.title}</h3>
                <ul style={{
                  listStyle: 'none', margin: '0 0 clamp(24px, 2.4vw, 40px)', padding: 0,
                  marginBottom: 'clamp(24px, 2.4vw, 40px)',
                }}>
                  {d.bullets.map((b, bi) => (
                    <li key={bi} style={{
                      display: 'flex', alignItems: 'baseline', gap: 10,
                      padding: '10px 0',
                      borderBottom: '1px solid var(--border-subtle)',
                    }}>
                      <span style={{
                        fontFamily: 'var(--font-ui)', fontWeight: 700, fontSize: 10,
                        letterSpacing: '0.18em', color: 'var(--lr-terracota)',
                        flexShrink: 0, lineHeight: 1.55,
                      }}>{'0' + (bi + 1)}</span>
                      <span style={{
                        fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.55,
                        color: 'var(--lr-tierra-profunda)',
                      }}>{b}</span>
                    </li>
                  ))}
                </ul>

                {/* Imagen al pie de la cell — alineada abajo en todas las columnas */}
                <div className="services-disc-thumb" aria-hidden style={{
                  position: 'relative',
                  aspectRatio: '16 / 9',
                  overflow: 'hidden',
                  background: 'var(--lr-tierra-profunda)',
                  marginTop: 'auto',
                  marginBottom: 'clamp(18px, 1.6vw, 26px)',
                }}>
                  <div className="services-disc-img" style={{
                    position: 'absolute', inset: 0,
                    backgroundImage: `url(${d.src})`,
                    backgroundSize: 'cover',
                    backgroundPosition: 'center',
                    transform: 'scale(1.0)',
                    transition: 'transform 900ms cubic-bezier(0.16, 1, 0.3, 1), filter 600ms',
                    filter: 'saturate(0.9)',
                  }} />
                </div>

              </div>
            );
          })}
        </div>

      </div>
      <style>{`
        .services-disc-cell { transition: background 360ms cubic-bezier(0.16,1,0.3,1); }
        .services-disc-grid:hover .services-disc-cell:not(:hover):not(:focus-within) { opacity: 0.6; }
        .services-disc-cell:hover,
        .services-disc-cell:focus-within { opacity: 1 !important; background: var(--eidora-lino); }

        @media (max-width: 1024px) {
          .services-disc-grid { grid-template-columns: repeat(2, 1fr) !important; }
        }
        @media (max-width: 767px) {
          .services-section { padding: 120px 24px 80px !important; }
          .services-header { grid-template-columns: 1fr !important; gap: 32px !important; }
          .services-disc-grid:hover .services-disc-cell:not(:hover) { opacity: 1 !important; }
        }
        @media (max-width: 479px) {
          .services-section { padding: 88px 16px 60px !important; }
          .services-disc-grid { grid-template-columns: 1fr !important; }
        }
        @media (prefers-reduced-motion: reduce) {
          .services-disc-cell {
            transition: none !important;
            transform: none !important;
            opacity: 1 !important;
          }
        }
      `}</style>
    </section>
  );
}

window.Services = Services;