// ACT 6 — Packaging motion

function ActPackaging({ lang }) {
  const content = window.CONTENT[lang].packaging;
  const sectionRef = useRef(null);
  const p = useStickyProgress(sectionRef);
  const isRTL = lang === 'ar';
  const { isPhone, isTablet } = useResponsive();
  const imageBase = window.location.pathname.includes('/prototype/') ? 'public/images' : 'images';

  const intro = easeOut(clamp(p / 0.18, 0, 1));
  const detail = easeOut(clamp((p - 0.42) / 0.38, 0, 1));
  const reveal = easeOut(clamp((p - 0.05) / 0.34, 0, 1));
  const settle = easeInOut(clamp((p - 0.28) / 0.34, 0, 1));
  const ambient = easeOut(clamp((p - 0.08) / 0.24, 0, 1));
  const stageY = isPhone ? lerp(72, -10, reveal) : lerp(94, -2, reveal);
  const stageScale = isPhone
    ? lerp(0.72, 0.92, reveal) + Math.sin(settle * Math.PI) * 0.025
    : lerp(0.76, 0.98, reveal) + Math.sin(settle * Math.PI) * 0.03;
  const stageTilt = isPhone ? lerp(10, 0, reveal) : lerp(13, 0, reveal);
  const stageRotate = isPhone ? lerp(-6, 0.4, reveal) : lerp(-8, 0.8, reveal);
  const boxLift = Math.sin(settle * Math.PI) * (isPhone ? -8 : -14);

  const detailRows = [
    ['01', isRTL ? 'انطباع أول مدروس' : 'A considered first impression'],
    ['02', isRTL ? 'طبقات تكشف الحكاية' : 'Layers that reveal the story'],
    ['03', isRTL ? 'لمسة شخصية هادئة' : 'A quiet personal touch'],
    ['04', isRTL ? 'مصمّم ليُهدى' : 'Made to be offered']
  ];

  return (
    <section ref={sectionRef} className="act" style={{ height: isPhone ? '315vh' : '340vh', background: '#050506' }}>
      <div style={{
        position: 'sticky',
        top: 0,
        height: isPhone ? '100svh' : '100vh',
        overflow: 'hidden',
        display: 'flex',
        flexDirection: isPhone ? 'column' : 'row',
        background: '#050506'
      }}>
        <div style={{
          position: 'absolute',
          inset: 0,
          background: isPhone
            ? 'linear-gradient(180deg, #050506 0%, #050506 48%, #070707 100%)'
            : `
              radial-gradient(circle at 76% 52%, rgba(10,126,49,${lerp(0.04, 0.32, ambient)}), transparent 36%),
              radial-gradient(circle at 70% 30%, rgba(194,112,62,${lerp(0, 0.18, ambient)}), transparent 34%),
              linear-gradient(90deg, #050506 0%, rgba(5,5,6,0.96) 39%, rgba(5,5,6,${lerp(0.18, 0.48, ambient)}) 62%, #050506 100%)
            `,
          zIndex: 1,
          pointerEvents: 'none'
        }} />

        <div style={{
          width: isPhone ? '100%' : isTablet ? '48%' : '42%',
          padding: isPhone ? 'calc(76px + env(safe-area-inset-top)) 24px 0' : isTablet ? '12vh 5vw' : '14vh 6vw',
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          zIndex: 4,
          pointerEvents: 'none'
        }}>
          <div className="mono" style={{ color: 'var(--fg-dim)', marginBottom: isPhone ? 18 : 32 }}>
            {content.eyebrow}
          </div>
          <h2 style={{
            fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-serif)',
            fontWeight: 300,
            fontSize: isPhone ? 'clamp(38px, 11vw, 56px)' : isTablet ? 'clamp(42px, 5vw, 68px)' : 'clamp(48px, 5.4vw, 82px)',
            lineHeight: isPhone ? 1.04 : 1,
            letterSpacing: '-0.02em',
            marginBottom: isPhone ? 24 : 40
          }}>
            {content.h}<br />
            <span style={{ fontStyle: 'italic' }}>{content.hIt}</span>
          </h2>
          <p style={{
            fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-sans)',
            fontSize: isPhone ? 15 : 17,
            lineHeight: isPhone ? 1.58 : 1.7,
            color: 'var(--fg-dim)',
            maxWidth: isPhone ? 310 : 430,
            fontWeight: 300,
            textWrap: 'pretty'
          }}>
            {content.body}
          </p>

          <div style={{
            marginTop: isPhone ? 28 : 48,
            display: isPhone ? 'none' : 'flex',
            flexDirection: 'column',
            gap: isPhone ? 9 : 14,
            maxWidth: isPhone ? 300 : 420
          }}>
            {detailRows.map((r, i) => {
              const rowIn = clamp((detail - i * 0.08) * 4, 0, 1);
              return (
                <div key={i} style={{
                  display: 'flex',
                  alignItems: 'center',
                  gap: 16,
                  paddingBottom: isPhone ? 10 : 12,
                  borderBottom: '1px solid var(--fg-faint)',
                  opacity: rowIn,
                  transform: `translateY(${(1 - rowIn) * 10}px)`,
                  transition: 'opacity 0.35s, transform 0.35s'
                }}>
                  <span className="mono" style={{ color: 'var(--ocre)', fontSize: 10 }}>{r[0]}</span>
                  <span style={{
                    fontSize: isPhone ? 13 : 14,
                    color: 'var(--fg)',
                    fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-sans)',
                    lineHeight: 1.25
                  }}>{r[1]}</span>
                </div>
              );
            })}
          </div>
        </div>

        <div style={{
          position: isPhone ? 'absolute' : 'relative',
          inset: isPhone ? 0 : 'auto',
          width: isPhone ? '100%' : '58%',
          height: '100%',
          marginLeft: isPhone ? 0 : 'auto',
          zIndex: 2,
          pointerEvents: 'none'
        }}>
          <div style={{
            position: 'absolute',
            left: isPhone ? '-5vw' : '-6vw',
            right: isPhone ? '-5vw' : '-4vw',
            top: isPhone ? '48svh' : '8vh',
            bottom: isPhone ? '8svh' : '4vh',
            transform: `
              perspective(${isPhone ? 760 : 980}px)
              translate3d(${isPhone ? 0 : lerp(34, -8, reveal)}px, ${stageY + boxLift}px, 0)
              rotateX(${stageTilt}deg)
              rotateZ(${stageRotate}deg)
              scale(${stageScale})
            `,
            transformOrigin: 'center center',
            willChange: 'transform'
          }}>
            <div style={{
              position: 'absolute',
              left: '14%',
              right: '12%',
              bottom: isPhone ? '7%' : '2%',
              height: isPhone ? 28 : 44,
              background: 'radial-gradient(ellipse at center, rgba(0,0,0,0.72), transparent 72%)',
              filter: 'blur(18px)',
              opacity: intro
            }} />

            <div style={{
              position: 'absolute',
              inset: isPhone ? '3% 4% 4%' : '0 3% 1%',
              background: isPhone
                ? 'radial-gradient(ellipse at 50% 58%, rgba(255,255,255,0.055), transparent 64%)'
                : `
                  radial-gradient(ellipse at 56% 58%, rgba(18,145,70,0.42), rgba(18,145,70,0.2) 34%, transparent 67%),
                  radial-gradient(ellipse at 52% 36%, rgba(220,176,98,0.16), transparent 46%)
                `,
              filter: isPhone ? 'blur(16px)' : 'blur(20px)',
              opacity: isPhone ? intro * 0.7 : intro,
              pointerEvents: 'none'
            }} />

            <img
              src={`${imageBase}/packaging-open-angle-clean.png`}
              alt=""
              loading="eager"
              decoding="async"
              style={{
                position: 'absolute',
                inset: 0,
                width: '100%',
                height: '100%',
                objectFit: 'contain',
                objectPosition: 'center center',
                opacity: reveal,
                transform: isPhone
                  ? `translate3d(0, ${lerp(22, -6, reveal)}px, 0) scale(${lerp(0.92, 0.98, reveal)})`
                  : `translate3d(0, ${lerp(30, -4, reveal)}px, 0) scale(${lerp(0.96, 1.02, reveal)})`,
                filter: `${isPhone
                  ? `brightness(${lerp(0.72, 1.18, reveal)}) contrast(${lerp(1, 1.08, reveal)}) saturate(0)`
                  : `brightness(${lerp(0.76, 1.24, reveal)}) contrast(${lerp(1.02, 1.12, reveal)}) saturate(0.98)`
                } blur(${lerp(2.4, 0, reveal)}px) drop-shadow(0 ${lerp(54, 34, reveal)}px ${lerp(62, 42, reveal)}px rgba(0,0,0,0.56))`,
                willChange: 'opacity, transform'
              }}
            />
          </div>

          <div style={{
            position: 'absolute',
            inset: isPhone ? '51svh 0 0 0' : 0,
            background: isPhone
              ? 'linear-gradient(180deg, #050506 0%, rgba(5,5,6,0.02) 18%, rgba(5,5,6,0.06) 100%)'
              : 'linear-gradient(90deg, #050506 0%, rgba(5,5,6,0.18) 17%, rgba(5,5,6,0) 45%, rgba(5,5,6,0.08) 100%)',
            zIndex: 3,
            pointerEvents: 'none'
          }} />
        </div>

        <div style={{
          position: 'absolute',
          top: isPhone ? 'calc(76px + env(safe-area-inset-top))' : '10vh',
          right: isPhone ? 24 : '6vw',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'flex-end',
          zIndex: 5
        }}>
          <div className="mono" style={{ color: 'var(--fg-dim)', fontSize: 10 }}>PACKAGING</div>
        </div>
      </div>
    </section>
  );
}

window.ActPackaging = ActPackaging;