/* global React, gsap, ScrollTrigger */

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

  const whys = [
    { n: t('why.0.n'), title: t('why.0.title'), body: t('why.0.body') },
    { n: t('why.1.n'), title: t('why.1.title'), body: t('why.1.body') },
    { n: t('why.2.n'), title: t('why.2.title'), body: t('why.2.body') },
  ];

  React.useEffect(() => {
    if (!window.gsap || !window.ScrollTrigger) return;
    if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    gsap.registerPlugin(ScrollTrigger);
    const ctx = gsap.context(() => {
      // Initial hidden state — prevent flicker before trigger fires
      gsap.set('.method-heading-group', { opacity: 0, y: 20 });
      gsap.set('.method-support-copy', { opacity: 0, y: 20 });
      gsap.set('.why-cell', { opacity: 0, y: 32 });

      // Header block: fade-up
      gsap.to(['.method-heading-group', '.method-support-copy'], {
        opacity: 1, y: 0,
        duration: 0.7,
        ease: 'expo.out',
        stagger: 0.08,
        scrollTrigger: {
          trigger: sectionRef.current,
          start: 'top 80%',
          once: true,
        },
      });

      // Differentiator cells: stagger fade-up
      gsap.to('.why-cell', {
        opacity: 1, y: 0,
        duration: 0.85,
        ease: 'expo.out',
        stagger: 0.1,
        scrollTrigger: {
          trigger: '.why-grid',
          start: 'top 78%',
          once: true,
        },
      });

    }, sectionRef);

    return () => ctx.revert();
  }, []);

  // Split title on \n to apply italic terracota to second line
  const rawTitle = t('method.header.title');
  const titleLines = rawTitle.split('\n');

  return (
    <section
      ref={sectionRef}
      id="metodo"
      data-screen-label="03 Por qué EIDORA"
      className="method-section"
      style={{
        background: 'var(--lr-cal-blanca)',
        padding: 'clamp(80px, 8vw, 140px) clamp(24px, 4vw, 56px) clamp(72px, 7vw, 120px)',
        borderTop: '1px solid var(--border-subtle)',
      }}
    >
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>

        {/* Header */}
        <div className="method-header-grid" style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1fr',
          gap: 'clamp(48px, 6vw, 96px)',
          alignItems: 'flex-end',
          marginBottom: 'clamp(48px, 6vw, 96px)',
        }}>
          {/* Left: eyebrow + h2 */}
          <div className="method-heading-group">
            <div style={{
              fontFamily: 'var(--font-ui)',
              fontWeight: 700,
              fontSize: 11,
              letterSpacing: '0.32em',
              textTransform: 'uppercase',
              color: 'var(--lr-terracota)',
              marginBottom: 18,
            }}>
              {t('method.header.label')}
            </div>
            <h2 style={{
              fontFamily: 'var(--font-display)',
              fontWeight: 400,
              fontSize: 'clamp(40px, 5vw, 76px)',
              lineHeight: 1.04,
              letterSpacing: '-0.024em',
              color: 'var(--lr-tierra-profunda)',
              margin: 0,
              whiteSpace: 'pre-line',
            }}>
              {titleLines[0]}
              {titleLines.length > 1 && (
                <>
                  {'\n'}
                  <em style={{
                    fontFamily: 'var(--font-italic)',
                    fontStyle: 'italic',
                    color: 'var(--lr-terracota)',
                  }}>
                    {titleLines[1]}
                  </em>
                </>
              )}
            </h2>
          </div>

          {/* Right: supporting copy */}
          <div className="method-support-copy" style={{
            display: 'flex',
            flexDirection: 'column',
            gap: 16,
          }}>
            <p style={{
              fontFamily: 'var(--font-body)',
              fontSize: 18,
              lineHeight: 1.6,
              color: 'var(--lr-tierra-500)',
              margin: 0,
              maxWidth: '100%',
              whiteSpace: 'pre-line',
            }}>
              {t('method.header.description')}
            </p>
          </div>
        </div>

        {/* Differentiators grid */}
        <div className="why-grid" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          borderTop: '1px solid var(--lr-tierra-profunda)',
        }}>
          {whys.map((w, i) => (
            <div
              key={i}
              className="why-cell"
              style={{
                padding: '40px 28px 56px',
                borderRight: i < whys.length - 1
                  ? '1px solid rgba(61, 53, 48, 0.18)'
                  : 'none',
              }}
            >
              <div style={{
                fontFamily: 'var(--font-display)',
                fontWeight: 400,
                fontSize: 32,
                lineHeight: 1,
                color: 'var(--lr-terracota)',
                marginBottom: 56,
              }}>
                {w.n}
              </div>
              <h3 style={{
                fontFamily: 'var(--font-ui)',
                fontWeight: 700,
                fontSize: 13,
                letterSpacing: '0.28em',
                textTransform: 'uppercase',
                color: 'var(--lr-tierra-profunda)',
                margin: '0 0 20px',
              }}>
                {w.title}
              </h3>
              <p style={{
                fontFamily: 'var(--font-body)',
                fontSize: 15,
                lineHeight: 1.6,
                color: 'var(--lr-tierra-500)',
                margin: 0,
              }}>
                {w.body}
              </p>
            </div>
          ))}
        </div>

      </div>

      <style>{`
        @media (prefers-reduced-motion: reduce) {
          .method-heading-group,
          .method-support-copy,
          .why-cell {
            opacity: 1 !important;
            transform: none !important;
            transition: none !important;
          }
        }
        @media (max-width: 1024px) {
          .why-grid { grid-template-columns: repeat(2, 1fr) !important; }
        }
        @media (max-width: 768px) {
          .method-section { padding: 120px 24px 80px !important; }
          .method-header-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
          .why-grid { grid-template-columns: 1fr !important; }
          .why-cell { border-right: none !important; }
        }
        @media (max-width: 480px) {
          .method-section { padding: 88px 16px 60px !important; }
          .why-cell { padding: 32px 20px 40px !important; }
        }
      `}</style>
    </section>
  );
}

window.Method = Method;