/* global React */

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

  React.useEffect(() => {
    const root = sectionRef.current;
    if (!root) return;
    const els = root.querySelectorAll('.mf-anim');
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add('mf-in');
          obs.unobserve(e.target);
        }
      });
    }, { threshold: 0.15, rootMargin: '0px 0px -10% 0px' });
    els.forEach((el) => obs.observe(el));
    return () => obs.disconnect();
  }, []);

  return (
    <section ref={sectionRef} id="agencia" data-screen-label="01 Agencia" className="mf-section" style={{
      background: 'var(--lr-cal-blanca)',
      padding: 'clamp(80px, 8vw, 140px) clamp(24px, 4vw, 56px) clamp(72px, 7vw, 120px)'
    }}>
      <style>{`
        .mf-anim {
          opacity: 0;
          transform: translateY(28px);
          transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1),
                      transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
        }
        .mf-anim.mf-in { opacity: 1; transform: translateY(0); }
        .mf-anim.mf-d1 { transition-delay: 80ms; }
        .mf-anim.mf-d2 { transition-delay: 160ms; }
        .mf-anim.mf-d3 { transition-delay: 240ms; }
        .mf-anim.mf-d4 { transition-delay: 320ms; }
        .mf-rule {
          transform-origin: left center;
          transform: scaleX(0);
          transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
        }
        .mf-rule.mf-in { transform: scaleX(1); }

        /* Thesis quote chunks — override parent mf-anim to not animate as a unit */
        .mf-anim.mf-thesis-anim { opacity: 1 !important; transform: none !important; transition: none !important; }
        .mf-chunk { display: inline-block; opacity: 0; transform: translateY(14px); transition: opacity 700ms var(--ease-emphasis, cubic-bezier(0.16,1,0.3,1)), transform 700ms var(--ease-emphasis, cubic-bezier(0.16,1,0.3,1)); }
        .mf-anim.mf-thesis-anim.mf-in .mf-chunk { opacity: 1; transform: translateY(0); }
        .mf-anim.mf-thesis-anim.mf-in .mf-chunk:nth-child(1) { transition-delay: 0ms; }
        .mf-anim.mf-thesis-anim.mf-in .mf-chunk:nth-child(2) { transition-delay: 80ms; }
        .mf-anim.mf-thesis-anim.mf-in .mf-chunk:nth-child(3) { transition-delay: 160ms; }
        .mf-anim.mf-thesis-anim.mf-in .mf-chunk:nth-child(4) { transition-delay: 240ms; }
        @media (prefers-reduced-motion: reduce) {
          .mf-anim { opacity: 1 !important; transform: none !important; transition: none !important; }
          .mf-rule { transform: scaleX(1) !important; transition: none !important; }
          .mf-chunk { opacity: 1; transform: none; transition: none; }
        }

        @media (max-width: 768px) {
          .mf-section { padding: 112px 24px 80px !important; }
          .mf-header-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
          .mf-header-grid > *:last-child { text-align: left !important; }
          .mf-copy-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
          .mf-copy-grid p { font-size: 16px !important; }
          .mf-thesis-grid {
            margin-top: 88px !important;
            padding-top: 40px !important;
            text-align: center !important;
          }
          .mf-thesis-grid p {
            margin-left: auto !important;
            margin-right: auto !important;
            max-width: 100% !important;
            font-size: clamp(26px, 7vw, 36px) !important;
            line-height: 1.18 !important;
          }
        }
        @media (max-width: 480px) {
          .mf-section { padding: 88px 16px 60px !important; }
          .mf-header-grid { margin-bottom: 56px !important; }
          .mf-thesis-grid p {
            font-size: clamp(24px, 7.4vw, 32px) !important;
          }
        }
      `}</style>

      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div className="mf-header-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap: 80, alignItems: 'flex-end', marginBottom: 'clamp(48px, 6vw, 96px)' }}>
          <div>
            <div className="mf-anim" style={eyebrow}>{t('manifesto.eyebrow')}</div>
            <h2 className="mf-anim mf-d1" style={{
              fontFamily: 'var(--font-display)', fontWeight: 400,
              fontSize: 'clamp(40px, 5.4vw, 78px)', lineHeight: 1.04,
              letterSpacing: '-0.022em',
              color: 'var(--lr-tierra-profunda)', margin: 0,
              maxWidth: 1000
            }}>
              {t('manifesto.title').replace(t('manifesto.title.emphasis'), '')}
              {' '}<em style={italicAccent}>{t('manifesto.title.emphasis')}</em>
            </h2>
          </div>
          <div className="mf-anim mf-d2" style={{
            fontFamily: 'var(--font-ui)', fontWeight: 700, fontSize: 10,
            letterSpacing: '0.32em', textTransform: 'uppercase',
            color: 'var(--lr-tierra-500)', textAlign: 'right',
            paddingBottom: 12, borderBottom: '1px solid var(--border-subtle)'
          }}>
            <span style={{whiteSpace:'pre-line'}}>{t('manifesto.meta')}</span>
          </div>
        </div>

        <div className="mf-copy-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'start' }}>
          <p className="mf-anim mf-d2" style={para}>
            {(() => { const p = t('manifesto.para1'), em = t('manifesto.para1.emphasis'), idx = p.indexOf(em); return idx < 0 ? p : [p.slice(0, idx), <em key="em" style={italicInline}>{em}</em>, p.slice(idx + em.length)]; })()}
          </p>
          <p className="mf-anim mf-d3" style={para}>
            {(() => { const p = t('manifesto.para2'), em = t('manifesto.para2.emphasis'), idx = p.indexOf(em); return idx < 0 ? p : [p.slice(0, idx), <em key="em" style={italicInline}>{em}</em>, p.slice(idx + em.length)]; })()}
          </p>
        </div>

        {/* Big italic thesis */}
        <div className="mf-thesis-grid" style={{
          marginTop: 'clamp(64px, 9vw, 140px)', marginBottom: 0,
          paddingTop: 'clamp(32px, 4vw, 56px)', paddingBottom: 0,
          position: 'relative',
        }}>
          <div className="mf-anim mf-rule" aria-hidden style={{
            position: 'absolute', top: 0, left: 0, right: 0,
            height: 1, background: 'var(--border-subtle)',
            opacity: 1,
          }} />
          <p className="mf-anim mf-thesis-anim" style={{
            fontFamily: 'var(--font-italic)', fontStyle: 'italic',
            fontWeight: 400, fontSize: 'clamp(34px, 4.2vw, 64px)',
            lineHeight: 1.12, letterSpacing: '-0.01em',
            color: 'var(--lr-tierra-profunda)', margin: 0, maxWidth: 1100
          }}>
            {t('manifesto.thesis.chunk1') ? <><span className="mf-chunk">{t('manifesto.thesis.chunk1')}</span>{' '}</> : null}
            {t('manifesto.thesis.chunk2') ? <><span className="mf-chunk">{t('manifesto.thesis.chunk2')}</span>{' '}</> : null}
            <span className="mf-chunk" style={{ color: 'var(--lr-terracota)' }}>{t('manifesto.thesis.chunk3')}</span>
            {' '}<span className="mf-chunk" style={{ color: 'var(--lr-terracota)' }}>{t('manifesto.thesis.chunk4')}</span>
          </p>
        </div>
      </div>
    </section>);
}

const eyebrow = {
  fontFamily: 'var(--font-ui)', fontWeight: 700, fontSize: 11,
  letterSpacing: '0.32em', textTransform: 'uppercase',
  color: 'var(--lr-terracota)', marginBottom: 28,
  display: 'inline-block'
};
const italicAccent = {
  fontFamily: 'var(--font-italic)', fontStyle: 'italic', fontWeight: 400,
  color: 'var(--lr-terracota)',
  textDecoration: 'underline',
  textDecorationThickness: '0.06em',
  textUnderlineOffset: '0.18em',
  textDecorationColor: 'var(--lr-terracota)'
};
const italicInline = {
  fontFamily: 'var(--font-italic)', fontStyle: 'italic', fontWeight: 500,
  color: 'var(--lr-tierra-profunda)'
};
const para = {
  fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.6,
  color: 'var(--lr-tierra-500)', margin: '0 0 28px',
  maxWidth: '60ch'
};

window.Manifesto = Manifesto;
window.manifestoStyles = { eyebrow, italicAccent, italicInline, para };