// ACT 4 — Colorway horizontal gallery: 3 cities, 3 stories

function ActColors({ lang, tweaks, onDiscoverProduct }) {
  const content = window.CONTENT[lang].colors;
  const sectionRef = useRef(null);
  const p = useStickyProgress(sectionRef);
  const isRTL = lang === 'ar';
  const { isPhone, isTablet } = useResponsive();
  const isCompact = isTablet;
  const collectionBridge = easeInOut(clamp(p / (isCompact ? 0.18 : 0.1), 0, 1));
  const collectionProductIntro = isCompact ? easeInOut(clamp(p / 0.16, 0, 1)) : collectionBridge;
  const collectionIntro = isCompact
    ? easeInOut(clamp((p - 0.08) / 0.15, 0, 1))
    : easeInOut(clamp((p - 0.025) / 0.1, 0, 1));
  const handoffShoeTravel = easeInOut(clamp(p / (isCompact ? 0.34 : 0.3), 0, 1));
  const handoffShoeOpacity = 1 - easeInOut(clamp((p - (isCompact ? 0.34 : 0.28)) / (isCompact ? 0.08 : 0.12), 0, 1));
  const firstShoeOpacity = easeInOut(clamp((p - (isCompact ? 0.38 : 0.34)) / (isCompact ? 0.08 : 0.12), 0, 1));
  const collectionExit = easeInOut(clamp((p - (isCompact ? 0.88 : 0.9)) / (isCompact ? 0.1 : 0.08), 0, 1));

  const items = content.items;
  const more = content.more;
  const openWaitlist = () => {
    window.dispatchEvent(new CustomEvent('belgham:open-waitlist'));
  };
  const openProduct = index => {
    if (onDiscoverProduct) onDiscoverProduct(index);
  };
  const totalPanels = items.length + 1;
  const teaserIdx = items.length;

  const pan = isCompact ? clamp((p - 0.3) / 0.58, 0, 1) : clamp((p - 0.42) / 0.48, 0, 1);
  const colorProgress = pan * (totalPanels - 1);
  const activeIdx = Math.min(totalPanels - 1, Math.max(0, Math.round(colorProgress)));
  const activeColorIdx = Math.min(items.length - 1, activeIdx);
  const teaserHandoff = easeInOut(clamp((colorProgress - (teaserIdx - 0.95)) / 0.34, 0, 1));
  const teaserPresence = easeInOut(clamp((colorProgress - (teaserIdx - 0.7)) / 0.46, 0, 1));
  const productExitToTeaser = easeInOut(clamp((colorProgress - (teaserIdx - 0.95)) / 0.38, 0, 1));
  const transitionPulse = isCompact ? Math.sin((colorProgress % 1) * Math.PI) : 0;
  const nextGlowIdx = Math.min(items.length - 1, Math.max(0, Math.floor(colorProgress + 0.001) + 1));
  const trackProgress = isCompact ? Math.min(colorProgress, teaserIdx - 1) : colorProgress;
  const translateX = -trackProgress * (100 / totalPanels);

  // Colorway shoe images: use different frames or the marrakech product shot
  const shoeImgs = [
    'images/belgha-360/frame-001.webp', // fes - yellow
    'images/belgha-chefchaouen-cutout.png',
    'images/belgha-marrakech-cutout.png'
  ];
  const cityBackdropImgs = [
    'images/city-bg-fes-tannery.webp',
    'images/city-bg-chefchaouen-medina.webp',
    'images/city-bg-marrakech-koutoubia.webp'
  ];

  return (
    <section
      ref={sectionRef}
      id="collection"
      className="act colors-act"
      style={{ height: isPhone ? '520vh' : isTablet ? '580vh' : '640vh', marginTop: isPhone ? '-88vh' : isTablet ? '-82vh' : '-70vh' }}
    >
      <div style={{
        position: 'sticky', top: 0, height: isPhone ? '100svh' : '100vh', overflow: 'hidden',
        background: '#07070a'
      }}>
        {isCompact && (
          <div style={{
            position: 'absolute',
            inset: 0,
            zIndex: 0,
            pointerEvents: 'none',
            opacity: (1 - collectionBridge) * 0.55
          }}>
            <img
              src="images/maalem-stitching/frame-190.webp"
              alt=""
              loading="eager"
              decoding="async"
              style={{
                width: '100%',
                height: '100%',
                objectFit: 'cover',
                filter: 'grayscale(0.25) brightness(0.42) contrast(1.08)',
                transform: `scale(${lerp(1.12, 1.02, collectionBridge)})`
              }}
            />
            <div style={{
              position: 'absolute',
              inset: 0,
              background: 'linear-gradient(180deg, rgba(7,7,10,0.34), rgba(7,7,10,0.86) 66%, #07070a)'
            }} />
          </div>
        )}

        {isCompact && handoffShoeOpacity > 0.01 && (
          <div style={{
            position: 'absolute',
            left: isCompact ? '50%' : '68%',
            top: isPhone
              ? `${lerp(-8, 63, handoffShoeTravel)}svh`
              : isTablet
                ? `${lerp(2, 58, handoffShoeTravel)}svh`
                : `${lerp(-7, 46, handoffShoeTravel)}vh`,
            width: isPhone ? 'min(90vw, 350px)' : isTablet ? 'min(64vw, 540px)' : 'min(44vw, 560px)',
            height: isPhone ? 'min(40svh, 330px)' : isTablet ? 'min(36svh, 380px)' : 'min(44vh, 460px)',
            transform: `translate3d(-50%, 0, 0) rotate(${lerp(-6, -1, handoffShoeTravel)}deg) scale(${lerp(1.12, isCompact ? 0.96 : 0.9, handoffShoeTravel)})`,
            opacity: handoffShoeOpacity,
            zIndex: 4,
            pointerEvents: 'none',
            willChange: 'transform, opacity'
          }}>
            <div style={{
              position: 'absolute',
              inset: '12%',
              background: `${items[0].hex}33`,
              filter: 'blur(36px)',
              borderRadius: '50%'
            }} />
            <img
              src={shoeImgs[0]}
              alt=""
              loading="eager"
              decoding="async"
              style={{
                position: 'relative',
                width: '100%',
                height: '100%',
                objectFit: 'contain',
                mixBlendMode: 'screen',
                filter: 'brightness(1.14) contrast(1.12) drop-shadow(0 24px 38px rgba(0,0,0,0.6))'
              }}
            />
          </div>
        )}

        {!isCompact && (
          <div style={{
            position: 'absolute',
            inset: 0,
            zIndex: 3,
            pointerEvents: 'none',
            opacity: collectionIntro,
            overflow: 'hidden'
          }}>
            {shoeImgs.map((src, i) => {
              const productDistance = colorProgress - i;
              const productPresence = clamp(1 - Math.abs(productDistance) * 1.08, 0, 1);
              const productDrift = clamp(productDistance, -1, 1);
              const productEnter = clamp((productDrift + 1) / 2, 0, 1);
              const productAlpha = productPresence < 0.12 ? 0 : productPresence * (0.28 + productPresence * 0.72);
              const firstPrePan = i === 0 && colorProgress < 0.02;
              const productTop = firstPrePan ? lerp(-7, 46, handoffShoeTravel) : 46;
              const productScale = firstPrePan
                ? lerp(1.12, 1, handoffShoeTravel)
                : lerp(0.88, 1.02, productPresence);
              const productRotate = firstPrePan
                ? lerp(-6, -1, handoffShoeTravel)
                : lerp(-7, 5, productEnter);

              return (
                <div key={src} style={{
                  position: 'absolute',
                  left: `calc(68% + ${-productDrift * 28}vw)`,
                  top: `${productTop}vh`,
                  width: 'min(44vw, 620px)',
                  height: 'min(48vh, 520px)',
                  opacity: productAlpha * (1 - productExitToTeaser),
                  transform: `translate3d(-50%, -50%, 0) rotate(${productRotate}deg) scale(${productScale})`,
                  willChange: 'transform, opacity'
                }}>
                  <div style={{
                    position: 'absolute',
                    inset: '12%',
                    background: `${items[i].hex}33`,
                    filter: 'blur(42px)',
                    borderRadius: '50%'
                  }} />
                  <img
                    src={src}
                    alt=""
                    loading="eager"
                    decoding="async"
                    style={{
                      position: 'relative',
                      width: '100%',
                      height: '100%',
                      objectFit: 'contain',
                      mixBlendMode: i === 0 ? 'screen' : 'normal',
                      filter: i === 0
                        ? 'brightness(1.12) contrast(1.12) drop-shadow(0 24px 38px rgba(0,0,0,0.58))'
                        : 'contrast(1.08) saturate(1.06) drop-shadow(0 24px 36px rgba(0,0,0,0.58))'
                    }}
                  />
                </div>
              );
            })}
          </div>
        )}

        {isCompact && (
          <div style={{
            position: 'absolute',
            inset: 0,
            zIndex: 1,
            pointerEvents: 'none',
            opacity: collectionIntro * lerp(0.34, 0.68, transitionPulse),
            mixBlendMode: 'screen',
            background: `
              radial-gradient(circle at ${lerp(38, 62, pan)}% 72%, ${items[activeColorIdx].hex}2e, transparent 43%),
              radial-gradient(circle at 52% 86%, ${items[nextGlowIdx].hex}24, transparent 38%)
            `,
            transform: `scale(${lerp(1, 1.08, transitionPulse)})`
          }} />
        )}

        <div style={{
          position: 'absolute',
          inset: 0,
          zIndex: 0,
          pointerEvents: 'none',
          opacity: collectionIntro,
          overflow: 'hidden'
        }}>
          {cityBackdropImgs.map((src, i) => {
            const backdropPresence = easeInOut(clamp(1 - Math.abs(colorProgress - i), 0, 1));
            return (
              <img
                key={src}
                src={src}
                alt=""
                loading="eager"
                decoding="async"
                style={{
                  position: 'absolute',
                  inset: 0,
                  width: '100%',
                  height: '100%',
                  objectFit: 'cover',
                  objectPosition: isCompact
                    ? (i === 0 ? '50% 54%' : i === 1 ? '61% 50%' : '54% 48%')
                    : (i === 0 ? '52% 56%' : i === 1 ? '45% 52%' : '55% 48%'),
                  opacity: backdropPresence * (isCompact ? 0.46 : 0.36),
                  filter: `saturate(${i === 1 ? 0.96 : 0.84}) brightness(${isCompact ? 0.68 : 0.58}) contrast(1.08)`,
                  transform: isCompact
                    ? `scale(${lerp(1.04, 1.01, backdropPresence)})`
                    : `scale(${lerp(1.08, 1.02, backdropPresence)})`,
                  willChange: 'opacity, transform'
                }}
              />
            );
          })}
          <div style={{
            position: 'absolute',
            inset: 0,
            background: `
              radial-gradient(circle at ${isCompact ? '50% 74%' : '67% 50%'}, ${items[activeColorIdx].hex}22, transparent 42%),
              ${isCompact
                ? 'linear-gradient(180deg, rgba(7,7,10,0.34), rgba(7,7,10,0.6) 46%, rgba(7,7,10,0.88))'
                : 'linear-gradient(90deg, rgba(7,7,10,0.82), rgba(7,7,10,0.48) 48%, rgba(7,7,10,0.76))'}
            `
          }} />
        </div>

        {isCompact && (
          <div style={{
            position: 'absolute',
            left: 0,
            right: 0,
            top: isPhone ? '53svh' : '50svh',
            height: isPhone ? '35svh' : '36svh',
            zIndex: 3,
            pointerEvents: 'none',
            overflow: 'visible'
          }}>
            {shoeImgs.map((src, i) => {
              const productDistance = colorProgress - i;
              const productPresence = clamp(1 - Math.abs(productDistance) * 1.08, 0, 1);
              const productDrift = clamp(productDistance, -1, 1);
              const productEnter = clamp((productDrift + 1) / 2, 0, 1);
              const productAlpha = productPresence < 0.16 ? 0 : productPresence * (0.35 + productPresence * 0.65);
              const productOpacity = collectionIntro * productAlpha * (1 - productExitToTeaser) * (i === 0 ? firstShoeOpacity * (1 - handoffShoeOpacity) : 1);

              return (
                <img
                  key={src}
                  src={src}
                  alt=""
                  loading="eager"
                  decoding="async"
                  style={{
                    position: 'absolute',
                    left: '50%',
                    top: 0,
                    width: isPhone ? 'min(86vw, 336px)' : 'min(66vw, 560px)',
                    height: '100%',
                    objectFit: 'contain',
                    opacity: productOpacity,
                    mixBlendMode: i === 0 ? 'screen' : 'normal',
                    filter: i === 0
                      ? 'brightness(1.12) contrast(1.12) drop-shadow(0 24px 38px rgba(0,0,0,0.58))'
                      : 'contrast(1.08) saturate(1.06) drop-shadow(0 24px 36px rgba(0,0,0,0.58))',
                    transform: `translate3d(calc(-50% + ${-productDrift * 18}vw), ${lerp(5, 0, productPresence)}svh, 0) rotate(${lerp(-10, 7, productEnter)}deg) scale(${lerp(0.84, 1.04, productPresence)})`,
                    willChange: 'transform, opacity'
                  }}
                />
              );
            })}
          </div>
        )}

        {/* Fixed header */}
        <div style={{
          position: 'absolute',
          top: isPhone ? 'calc(82px + env(safe-area-inset-top))' : isTablet ? '92px' : '8vh',
          left: 0,
          right: 0,
          zIndex: 5,
          display: 'flex',
          justifyContent: 'space-between',
          gap: isCompact ? 18 : 24,
          padding: isPhone ? '0 24px' : isTablet ? '0 40px' : '0 6vw',
          alignItems: isCompact ? 'flex-start' : 'flex-end',
          opacity: collectionIntro,
          transform: `translate3d(0, ${lerp(4, 0, collectionIntro)}vh, 0)`
        }}>
          <div style={{
            opacity: 1 - teaserHandoff,
            transform: `translate3d(0, ${lerp(0, -14, teaserHandoff)}px, 0)`,
            pointerEvents: teaserHandoff > 0.85 ? 'none' : 'auto'
          }}>
            <div className="mono" style={{ color: 'var(--fg-dim)', marginBottom: 16 }}>{content.eyebrow}</div>
            <h2 style={{
              fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-serif)',
              fontWeight: 300,
              fontSize: isPhone ? 'clamp(34px, 10vw, 46px)' : isTablet ? 'clamp(42px, 6vw, 58px)' : 'clamp(40px, 5vw, 72px)',
              lineHeight: isCompact ? 1.05 : 1,
              letterSpacing: '-0.02em'
            }}>
              {content.h} <span style={{ fontStyle: isRTL ? 'normal' : 'italic' }}>{content.hIt}</span>
            </h2>
          </div>
          <div style={{
            display: 'flex',
            gap: isCompact ? 8 : 12,
            alignItems: 'center',
            paddingTop: isCompact ? 9 : 0,
            direction: 'ltr',
            flexShrink: 0,
            whiteSpace: 'nowrap'
          }}>
            {Array.from({ length: totalPanels }).map((_, i) => {
              const dotColor = i < items.length ? items[i].hex : 'var(--fg)';
              return (
              <div key={i} style={{
                width: 10, height: 10, borderRadius: '50%',
                background: i === activeIdx ? dotColor : 'transparent',
                border: `1px solid ${i === activeIdx ? dotColor : 'var(--fg-faint)'}`,
                transition: 'all 0.6s'
              }} />
              );
            })}
            <div className="mono" style={{
              marginLeft: isCompact ? 4 : 12,
              color: 'var(--fg-dim)',
              fontVariantNumeric: 'tabular-nums',
              fontSize: isCompact ? 9 : undefined,
              direction: 'ltr',
              unicodeBidi: 'isolate',
              minWidth: isCompact ? 38 : 52,
              whiteSpace: 'nowrap'
            }}>
              {String(activeIdx + 1).padStart(2, '0')} / {String(totalPanels).padStart(2, '0')}
            </div>
          </div>
        </div>

        {/* Horizontal panels */}
        <div style={{
          display: 'flex',
          width: `${totalPanels * 100}%`,
          height: '100%',
          transform: `translateX(${translateX}%)`,
          opacity: isCompact ? lerp(0.72, 1, collectionProductIntro) : collectionIntro,
          transition: 'none',
          willChange: 'transform, opacity'
        }}>
          {items.map((it, i) => {
            const panelDistance = isCompact ? colorProgress - i : activeIdx - i;
            const panelPresence = isCompact ? clamp(1 - Math.abs(panelDistance) * 1.25, 0, 1) : 1;
            const productPresence = isCompact ? clamp(1 - Math.abs(panelDistance) * 1.08, 0, 1) : 1;
            const productDrift = isCompact ? clamp(panelDistance, -1, 1) : 0;
            const productEnter = clamp((productDrift + 1) / 2, 0, 1);
            const compactProductY = (i === 0 ? lerp(isPhone ? 6 : 5, 0, collectionProductIntro) : 0) + lerp(4, 0, productPresence);

            return (
            <div key={i} style={{
              width: `${100 / totalPanels}%`,
              height: '100%',
              position: 'relative',
              display: 'flex', alignItems: 'center',
              padding: isPhone ? '0 24px' : isTablet ? '0 40px' : '0 6vw',
              overflow: 'hidden'
            }}>
              {/* City huge ghost type */}
              <div style={{
                position: 'absolute',
                bottom: '-4vh',
                left: 0, right: 0,
                zIndex: 1,
                fontFamily: 'var(--font-serif)',
                fontWeight: 300,
                fontStyle: 'italic',
                fontSize: isPhone ? 'clamp(104px, 30vw, 132px)' : isTablet ? 'clamp(132px, 22vw, 190px)' : 'clamp(180px, 28vw, 440px)',
                lineHeight: 0.85,
                color: it.hex,
                opacity: 0.14 * collectionIntro * (isCompact ? lerp(0.45, 1, panelPresence) : 1),
                whiteSpace: 'nowrap',
                textAlign: 'center',
                letterSpacing: '-0.03em',
                pointerEvents: 'none',
                transform: `translateX(${(i === activeIdx ? 0 : (i < activeIdx ? -10 : 10))}vw)`,
                transition: 'transform 1s'
              }}>
                {it.name}
              </div>

              {/* Content */}
              <div style={{
                display: 'grid',
                gridTemplateColumns: isCompact ? '1fr' : '1fr 1fr',
                gridTemplateRows: isCompact ? 'auto 1fr' : 'auto',
                width: '100%',
                height: isCompact ? '100%' : '70%',
                gap: isPhone ? 22 : isTablet ? 28 : '4vw',
                alignItems: isCompact ? 'start' : 'center',
                alignContent: isPhone ? 'start' : isCompact ? 'center' : 'normal',
                position: 'relative',
                zIndex: 2,
                direction: isRTL ? 'rtl' : 'ltr'
              }}>
                {/* Left: meta */}
                <div style={{
                  maxWidth: isPhone ? 342 : isTablet ? 560 : 480,
                  paddingTop: isPhone ? 'clamp(178px, 25svh, 216px)' : isTablet ? 236 : 0,
                  opacity: isCompact ? collectionIntro * lerp(0.12, 1, panelPresence) : 1,
                  transform: isCompact ? `translate3d(${lerp(18, 0, panelPresence) * (panelDistance < 0 ? 1 : -1)}px, ${lerp(18, 0, collectionIntro)}px, 0)` : 'none',
                  textAlign: isRTL ? 'right' : 'left'
                }}>
                  <div className="mono" style={{
                    color: it.hex,
                    fontSize: isCompact ? 10 : 11,
                    marginBottom: isCompact ? 14 : 24
                  }}>
                    № {String(i + 1).padStart(2, '0')} — {it.city}
                  </div>
                  <h3 style={{
                    fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-serif)',
                    fontWeight: 300,
                    fontSize: isPhone ? 'clamp(34px, 9.7vw, 43px)' : isTablet ? 'clamp(50px, 7vw, 60px)' : 'clamp(48px, 6vw, 96px)',
                    lineHeight: isCompact ? 1 : 0.95,
                    letterSpacing: '-0.02em',
                    marginBottom: isCompact ? 8 : 12,
                    maxWidth: isPhone ? '8.4ch' : isTablet ? '11ch' : 'none',
                    overflowWrap: 'normal'
                  }}>
                    {it.name}
                  </h3>
                  <div style={{
                    fontFamily: 'var(--font-serif)',
                    fontStyle: 'italic',
                    fontWeight: 300,
                    fontSize: isPhone ? 19 : isTablet ? 23 : 'clamp(20px, 2vw, 28px)',
                    color: 'var(--fg-dim)',
                    marginBottom: isCompact ? 24 : 40
                  }}>
                    {it.sub}
                  </div>
                  <p style={{
                    fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-sans)',
                    fontSize: isCompact ? 14 : 16,
                    lineHeight: isCompact ? 1.55 : 1.6,
                    color: 'var(--fg-dim)',
                    fontWeight: 300,
                    maxWidth: isPhone ? 286 : isTablet ? 360 : 340,
                    textWrap: 'pretty'
                  }}>
                    {it.note}
                  </p>

                  <div style={{ marginTop: isCompact ? 30 : 48, display: 'flex', alignItems: 'center', gap: 24 }}>
                    <button onClick={() => openProduct(i)} style={{
                      background: 'transparent',
                      border: '1px solid var(--fg)',
                      color: 'var(--fg)',
                      padding: isCompact ? '13px 24px' : '14px 28px',
                      fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-mono)',
                      fontSize: isRTL ? (isCompact ? 14 : 15) : (isCompact ? 10 : 11),
                      letterSpacing: isRTL ? '0' : '0.2em',
                      textTransform: isRTL ? 'none' : 'uppercase'
                    }} data-cursor="hover">
                      {isRTL ? 'اكتشف' : 'DISCOVER'}
                    </button>
                  </div>
                </div>

                {/* Right: shoe */}
                <div style={{
                  position: 'relative',
                  width: '100%',
                  height: isPhone ? '31svh' : isTablet ? '34svh' : '80vh',
                  maxHeight: 700,
                  display: 'flex', alignItems: 'center', justifyContent: 'center'
                }}>
                  {/* Color-tinted spotlight */}
                  <div style={{
                    position: 'absolute',
                    inset: '10%',
                    background: `radial-gradient(circle, ${it.hex}33, transparent 55%)`,
                    filter: 'blur(40px)',
                    opacity: collectionIntro
                  }} />
                  <img
                    src={shoeImgs[i]}
                    style={{
                      position: 'relative',
                      width: isPhone ? 'min(82vw, 320px)' : isTablet ? 'min(68vw, 520px)' : '100%',
                      height: '100%',
                      objectFit: 'contain',
                      opacity: isCompact ? 0 : 0,
                      mixBlendMode: i === 0 ? 'screen' : 'normal',
                      filter: i === 0 ? 'brightness(1.1) contrast(1.1)' : isCompact ? 'contrast(1.08) saturate(1.06) drop-shadow(0 24px 34px rgba(0,0,0,0.55))' : 'contrast(1.05)',
                      transform: isCompact
                        ? `translate3d(${-productDrift * 12}vw, ${compactProductY}svh, 0) rotate(${lerp(-9, 7, productEnter)}deg) scale(${lerp(0.86, 1.04, productPresence)})`
                        : `rotate(${(i === activeIdx ? 0 : -3)}deg) scale(${i === activeIdx ? 1 : 0.9})`,
                      transition: isCompact ? 'none' : 'transform 1.2s cubic-bezier(0.25,0.46,0.45,0.94)',
                      willChange: isCompact ? 'transform, opacity' : 'auto'
                    }}
                  />
                  {/* Shadow */}
                  <div style={{
                    position: 'absolute', bottom: '8%', left: '15%', right: '15%',
                    height: 14,
                    background: 'radial-gradient(ellipse at center, rgba(0,0,0,0.8), transparent 70%)',
                    filter: 'blur(10px)'
                  }} />
                </div>
              </div>
            </div>
            );
          })}
          <div style={{
            width: `${100 / totalPanels}%`,
            height: '100%',
            position: 'relative',
            display: isCompact ? 'none' : 'flex',
            alignItems: 'center',
            padding: isPhone ? '0 24px' : isTablet ? '0 40px' : '0 6vw',
            overflow: 'hidden'
          }}>
            <div style={{
              position: 'absolute',
              inset: 0,
              zIndex: 0,
              pointerEvents: 'none',
              opacity: collectionIntro,
              background: `
                radial-gradient(circle at ${isCompact ? '50% 68%' : '68% 50%'}, rgba(216,195,160,0.16), transparent 44%),
                linear-gradient(180deg, rgba(7,7,10,0.16), rgba(7,7,10,0.78))
              `
            }} />
            <div style={{
              display: 'grid',
              gridTemplateColumns: isCompact ? '1fr' : 'minmax(0, 0.78fr) minmax(0, 1.22fr)',
              width: '100%',
              height: isCompact ? '100%' : '72%',
              gap: isPhone ? 18 : isTablet ? 30 : '5vw',
              alignItems: isCompact ? 'start' : 'center',
              alignContent: isPhone ? 'start' : isCompact ? 'center' : 'normal',
              position: 'relative',
              zIndex: 2,
              paddingTop: isPhone ? 'clamp(86px, 11svh, 106px)' : isTablet ? 170 : 0
            }}>
              <div style={{
                maxWidth: isPhone ? 340 : isTablet ? 540 : 520,
                opacity: isCompact ? collectionIntro * teaserPresence : 1,
                transform: isCompact ? `translate3d(0, ${lerp(18, 0, teaserPresence)}px, 0)` : 'none'
              }}>
                <div className="mono" style={{
                  color: 'var(--fg-dim)',
                  fontSize: isCompact ? 10 : 11,
                  marginBottom: isCompact ? 14 : 24
                }}>
                  № {String(totalPanels).padStart(2, '0')} — {more.eyebrow}
                </div>
                <h3 style={{
                  fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-serif)',
                  fontWeight: 300,
                  fontSize: isPhone ? 'clamp(34px, 9.8vw, 44px)' : isTablet ? 'clamp(48px, 7vw, 62px)' : 'clamp(48px, 5.8vw, 88px)',
                  lineHeight: isCompact ? 1 : 0.95,
                  letterSpacing: '-0.02em',
                  marginBottom: isCompact ? 16 : 24,
                  maxWidth: isPhone ? '9.5ch' : 'none'
                }}>
                  {more.h} <span style={{ fontStyle: isRTL ? 'normal' : 'italic' }}>{more.hIt}</span>
                </h3>
                <p style={{
                  fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-sans)',
                  fontSize: isCompact ? 14 : 16,
                  lineHeight: isCompact ? 1.55 : 1.65,
                  color: 'var(--fg-dim)',
                  fontWeight: 300,
                  maxWidth: isPhone ? 308 : 440,
                  textWrap: 'pretty'
                }}>
                  {more.body}
                </p>
                <button onClick={openWaitlist} style={{
                  marginTop: isCompact ? 22 : 34,
                  background: 'rgba(250,250,247,0.04)',
                  border: '1px solid rgba(250,250,247,0.72)',
                  color: 'var(--fg)',
                  padding: isCompact ? '13px 20px' : '14px 26px',
                  fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-mono)',
                  fontSize: isRTL ? 14 : (isCompact ? 9 : 10),
                  letterSpacing: isRTL ? '0' : '0.18em',
                  textTransform: isRTL ? 'none' : 'uppercase'
                }} data-cursor="hover">
                  {more.cta}
                </button>
              </div>

              <div style={{
                display: 'grid',
                gridTemplateColumns: isPhone ? 'repeat(2, minmax(0, 1fr))' : 'repeat(2, minmax(0, 1fr))',
                gap: isPhone ? 10 : isTablet ? 12 : 16,
                width: '100%',
                maxWidth: isCompact ? 560 : 760,
                marginLeft: isRTL || isCompact ? 0 : 'auto'
              }}>
                {more.cities.map((city, i) => {
                  const tilePresence = clamp((colorProgress - (teaserIdx - 0.32) - i * 0.045) / 0.34, 0, 1);
                  return (
                    <div key={city.name} style={{
                      position: 'relative',
                      minHeight: isPhone ? 126 : isTablet ? 150 : 210,
                      aspectRatio: isPhone ? '1.22 / 1' : isCompact ? '1 / 0.92' : '1.22 / 1',
                      overflow: 'hidden',
                      border: '1px solid rgba(250,250,247,0.16)',
                      background: '#09090c',
                      opacity: collectionIntro * tilePresence,
                      transform: `translate3d(0, ${lerp(22, 0, tilePresence)}px, 0)`,
                      willChange: 'transform, opacity'
                    }}>
                      <img
                        src={city.img}
                        alt=""
                        loading={isPhone ? 'eager' : 'lazy'}
                        decoding="async"
                        style={{
                          position: 'absolute',
                          inset: 0,
                          width: '100%',
                          height: '100%',
                          objectFit: 'cover',
                          filter: 'saturate(0.88) brightness(0.72) contrast(1.08)',
                          transform: `scale(${lerp(1.08, 1.02, tilePresence)})`
                        }}
                      />
                      <div style={{
                        position: 'absolute',
                        inset: 0,
                        background: 'linear-gradient(180deg, rgba(7,7,10,0.08), rgba(7,7,10,0.72) 72%, rgba(7,7,10,0.9))'
                      }} />
                      <div style={{
                        position: 'absolute',
                        left: isPhone ? 12 : 16,
                        right: isPhone ? 12 : 16,
                        bottom: isPhone ? 12 : 16
                      }}>
                        <div style={{
                          width: 18,
                          height: 2,
                          background: city.hex,
                          marginBottom: 8
                        }} />
                        <strong style={{
                          display: 'block',
                          fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-mono)',
                          fontSize: isPhone ? 10 : 11,
                          letterSpacing: isRTL ? '0.02em' : '0.16em',
                          color: 'var(--fg)',
                          textTransform: isRTL ? 'none' : 'uppercase',
                          marginBottom: 5
                        }}>
                          {city.name}
                        </strong>
                        <span style={{
                          display: 'block',
                          fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-serif)',
                          fontStyle: isRTL ? 'normal' : 'italic',
                          fontSize: isPhone ? 14 : 16,
                          color: 'var(--fg-dim)'
                        }}>
                          {city.note}
                        </span>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        </div>

        {isCompact && (
          <div style={{
            position: 'absolute',
            inset: 0,
            zIndex: 4,
            pointerEvents: teaserPresence > 0.85 ? 'auto' : 'none',
            opacity: collectionIntro * teaserHandoff,
            background: `
              radial-gradient(circle at 50% 66%, rgba(216,195,160,0.14), transparent 46%),
              linear-gradient(180deg, rgba(7,7,10,0.98), #07070a 46%, #07070a)
            `,
            willChange: 'opacity'
          }}>
            <div style={{
              display: 'grid',
              gridTemplateColumns: '1fr',
              width: '100%',
              height: '100%',
              gap: isPhone ? 18 : 30,
              alignItems: 'start',
              alignContent: isPhone ? 'start' : 'center',
              padding: isPhone
                ? 'clamp(86px, 11svh, 106px) 24px calc(34px + env(safe-area-inset-bottom))'
                : '170px 40px calc(44px + env(safe-area-inset-bottom))',
              opacity: teaserPresence,
              transform: `translate3d(0, ${lerp(18, 0, teaserPresence)}px, 0)`,
              willChange: 'opacity, transform'
            }}>
              <div style={{ maxWidth: isPhone ? 340 : 540 }}>
                <div className="mono" style={{
                  color: 'var(--fg-dim)',
                  fontSize: isCompact ? 10 : 11,
                  marginBottom: isCompact ? 14 : 24
                }}>
                  № {String(totalPanels).padStart(2, '0')} — {more.eyebrow}
                </div>
                <h3 style={{
                  fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-serif)',
                  fontWeight: 300,
                  fontSize: isPhone ? 'clamp(34px, 9.8vw, 44px)' : 'clamp(48px, 7vw, 62px)',
                  lineHeight: 1,
                  letterSpacing: '-0.02em',
                  marginBottom: 16,
                  maxWidth: isPhone ? '9.5ch' : 'none'
                }}>
                  {more.h} <span style={{ fontStyle: isRTL ? 'normal' : 'italic' }}>{more.hIt}</span>
                </h3>
                <p style={{
                  fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-sans)',
                  fontSize: 14,
                  lineHeight: 1.55,
                  color: 'var(--fg-dim)',
                  fontWeight: 300,
                  maxWidth: isPhone ? 308 : 440,
                  textWrap: 'pretty'
                }}>
                  {more.body}
                </p>
                <button onClick={openWaitlist} style={{
                  marginTop: 22,
                  background: 'rgba(250,250,247,0.04)',
                  border: '1px solid rgba(250,250,247,0.72)',
                  color: 'var(--fg)',
                  padding: isPhone ? '13px 20px' : '13px 24px',
                  fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-mono)',
                  fontSize: isRTL ? 14 : (isPhone ? 9 : 10),
                  letterSpacing: isRTL ? '0' : '0.18em',
                  textTransform: isRTL ? 'none' : 'uppercase'
                }} data-cursor="hover">
                  {more.cta}
                </button>
              </div>

              <div style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
                gap: isPhone ? 10 : 12,
                width: '100%',
                maxWidth: 560
              }}>
                {more.cities.map((city, i) => {
                  const tilePresence = clamp((colorProgress - (teaserIdx - 0.32) - i * 0.045) / 0.34, 0, 1);
                  return (
                    <div key={city.name} style={{
                      position: 'relative',
                      minHeight: isPhone ? 126 : 150,
                      aspectRatio: isPhone ? '1.22 / 1' : '1 / 0.92',
                      overflow: 'hidden',
                      border: '1px solid rgba(250,250,247,0.16)',
                      background: '#09090c',
                      opacity: tilePresence,
                      transform: `translate3d(0, ${lerp(18, 0, tilePresence)}px, 0)`,
                      willChange: 'transform, opacity'
                    }}>
                      <img
                        src={city.img}
                        alt=""
                        loading="eager"
                        decoding="async"
                        style={{
                          position: 'absolute',
                          inset: 0,
                          width: '100%',
                          height: '100%',
                          objectFit: 'cover',
                          filter: 'saturate(0.88) brightness(0.72) contrast(1.08)',
                          transform: `scale(${lerp(1.08, 1.02, tilePresence)})`
                        }}
                      />
                      <div style={{
                        position: 'absolute',
                        inset: 0,
                        background: 'linear-gradient(180deg, rgba(7,7,10,0.08), rgba(7,7,10,0.72) 72%, rgba(7,7,10,0.9))'
                      }} />
                      <div style={{
                        position: 'absolute',
                        left: isPhone ? 12 : 16,
                        right: isPhone ? 12 : 16,
                        bottom: isPhone ? 12 : 16
                      }}>
                        <div style={{ width: 18, height: 2, background: city.hex, marginBottom: 8 }} />
                        <strong style={{
                          display: 'block',
                          fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-mono)',
                          fontSize: isPhone ? 10 : 11,
                          letterSpacing: isRTL ? '0.02em' : '0.16em',
                          color: 'var(--fg)',
                          textTransform: isRTL ? 'none' : 'uppercase',
                          marginBottom: 5
                        }}>
                          {city.name}
                        </strong>
                        <span style={{
                          display: 'block',
                          fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-serif)',
                          fontStyle: isRTL ? 'normal' : 'italic',
                          fontSize: isPhone ? 14 : 16,
                          color: 'var(--fg-dim)'
                        }}>
                          {city.note}
                        </span>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        )}

        {/* Soft exit into the Maalem section */}
        <div style={{
          position: 'absolute',
          left: 0,
          right: 0,
          bottom: 0,
          height: isPhone ? '28svh' : isTablet ? '24vh' : '22vh',
          zIndex: 6,
          pointerEvents: 'none',
          opacity: collectionExit,
          background: 'linear-gradient(180deg, rgba(2,2,3,0), rgba(2,2,3,0.74) 62%, #020203 100%)',
          transform: `translate3d(0, ${lerp(6, 0, collectionExit)}vh, 0)`,
          willChange: 'opacity, transform'
        }} />
      </div>
    </section>
  );
}

window.ActColors = ActColors;