// ACT 5 — Maalem provenance archive

function ActMaalem({ lang }) {
  const content = window.CONTENT[lang].maalem;
  const sectionRef = useRef(null);
  const p = useStickyProgress(sectionRef);
  const isRTL = lang === 'ar';

  const intro = easeInOut(clamp(p / 0.16, 0, 1));
  const portraitFocus = easeInOut(clamp((p - 0.05) / 0.34, 0, 1));
  const archive = easeOut(clamp((p - 0.22) / 0.32, 0, 1));
  const mark = easeOut(clamp((p - 0.42) / 0.25, 0, 1));
  const seal = easeOut(clamp((p - 0.54) / 0.24, 0, 1));
  const proof = easeOut(clamp((p - 0.64) / 0.26, 0, 1));
  const bridge = easeInOut(clamp((p - 0.76) / 0.22, 0, 1));
  const out = easeInOut(clamp((p - 0.9) / 0.1, 0, 1));

  const portraitScale = lerp(1.12, 1.02, portraitFocus);
  const portraitX = lerp(-3, 2, portraitFocus);
  const quote = isRTL ? content.quote : `“${content.quote}”`;
  const rows = [
    ['01', isRTL ? 'صنع باليد' : 'Hand shaped'],
    ['02', isRTL ? 'خياطة المعلّم' : 'Maalem stitched'],
    ['03', isRTL ? 'جاهز ليُقدَّم' : 'Finished to be offered']
  ];

  return (
    <section ref={sectionRef} id="about" className="act act-maalem-maker">
      <div className="maalem-maker__sticky">
        <div className="maalem-maker__portrait">
          <img
            src="images/maalem.png"
            alt=""
            style={{
              transform: `translate3d(calc(-50% + ${portraitX}vw), -50%, 0) scale(${portraitScale})`,
              opacity: lerp(0.52, 0.34, portraitFocus) * (1 - out * 0.8)
            }}
          />
        </div>
        <div className="maalem-maker__wash" />
        <div className="maalem-maker__grid" style={{ opacity: 0.05 * intro * (1 - out) }} />

        <div
          className={`maalem-maker__layout ${isRTL ? 'is-rtl' : ''}`}
          style={{
            opacity: intro * (1 - bridge * 0.42) * (1 - out * 0.65),
            transform: `translate3d(0, ${lerp(4, 0, intro) + lerp(0, -3.5, bridge)}vh, 0)`
          }}
        >
          <div className="maalem-maker__copy">
            <div className="mono maalem-maker__eyebrow">
              {isRTL ? '٠٥ — المعلّم' : '05 — THE MAÂLEM'}
            </div>
            <h2
              className={isRTL ? 'is-arabic' : ''}
              style={{
                transform: `translate3d(0, ${lerp(18, 0, intro)}px, 0)`,
                opacity: intro
              }}
            >
              {quote}
            </h2>
            <p>{content.body}</p>
            <div className="mono maalem-maker__attribution">{content.attribution}</div>

            <div className="maalem-maker__proof">
              {rows.map((row, i) => {
                const rowOn = clamp((proof - i * 0.16) / 0.36, 0, 1);
                return (
                  <div
                    key={row[0]}
                    className="maalem-maker__proof-row"
                    style={{
                      opacity: rowOn,
                      transform: `translate3d(0, ${lerp(14, 0, rowOn)}px, 0)`
                    }}
                  >
                    <span className="mono">{row[0]}</span>
                    <strong>{row[1]}</strong>
                  </div>
                );
              })}
            </div>
          </div>

          <div
            className="maalem-maker__archive"
            style={{
              transform: `translate3d(0, ${lerp(32, 0, intro)}px, 0) scale(${lerp(0.94, 1, intro)})`
            }}
          >
            <div
              className="maalem-maker__folio is-back"
              style={{
                opacity: archive * 0.72,
                transform: `translate3d(${lerp(22, 0, archive)}px, ${lerp(38, 0, archive)}px, 0) rotate(${lerp(9, 5, archive)}deg)`
              }}
            >
              <span className="mono">{isRTL ? 'المدينة القديمة، فاس' : 'MÉDINA DE FÈS'}</span>
              <strong>MMXXVI</strong>
            </div>
            <div
              className="maalem-maker__folio is-main"
              style={{
                opacity: archive,
                transform: `translate3d(${lerp(-18, 0, archive)}px, ${lerp(26, 0, archive)}px, 0) rotate(${lerp(-7, -3, archive)}deg)`
              }}
            >
              <div className="mono">{isRTL ? 'سجل المشغل' : 'ATELIER RECORD'}</div>
              <h3>{isRTL ? 'أثر اليد' : 'Proof of hand'}</h3>
              <dl>
                <div><dt>{isRTL ? 'المعلّم' : 'Maalem'}</dt><dd>{isRTL ? 'سي محمد' : 'Si Mohamed'}</dd></div>
                <div><dt>{isRTL ? 'المكان' : 'Place'}</dt><dd>{isRTL ? 'فاس' : 'Médina de Fès'}</dd></div>
                <div><dt>{isRTL ? 'الطريقة' : 'Method'}</dt><dd>{isRTL ? 'يدوي' : 'By hand'}</dd></div>
              </dl>
              <img src="images/logo-dark.png" alt="" />
            </div>

            <div
              className="maalem-maker__mark"
              style={{
                opacity: mark,
                transform: `translate3d(${lerp(18, 0, mark)}px, ${lerp(26, 0, mark)}px, 0) rotate(${lerp(5, -2, mark)}deg)`
              }}
            >
              <div className="mono">{isRTL ? 'ختم المشغل' : 'ATELIER MARK'}</div>
              <img src="images/logo-dark.png" alt="" />
              <span>{isRTL ? 'أثر الصانع' : "Maker's touch"}</span>
              <strong>{isRTL ? 'فاس' : 'Fès'}</strong>
            </div>

            <div
              className="maalem-maker__seal"
              style={{
                opacity: seal,
                transform: `scale(${lerp(0.72, 1, seal)}) rotate(${lerp(-18, 0, seal)}deg)`
              }}
            >
              <span>05</span>
            </div>

            <div className="maalem-maker__measure" style={{ opacity: archive }}>
              <span />
              <span />
              <span />
              <span />
            </div>
          </div>
        </div>

        <div className="maalem-maker__bridge" style={{ opacity: bridge }} />
        <div
          className="mono maalem-maker__next"
          style={{
            opacity: bridge,
            transform: `translate3d(0, ${lerp(14, 0, bridge)}px, 0)`
          }}
        >
          {isRTL ? 'التالي — فتح العلبة' : 'NEXT — THE UNBOXING'}
        </div>
      </div>
    </section>
  );
}

window.ActMaalem = ActMaalem;