// Runtime image override for the About section.
// The uploaded team photo is stored as compact base64 chunks under /assets.

(() => {
  const OriginalWAbout = window.WAbout;
  if (!OriginalWAbout) return;

  const getTeamPhoto = () => {
    const parts = window.WORKS_TEAM_PHOTO_PARTS || [];
    if (parts.length !== 4 || parts.some(part => !part)) return null;
    return `data:image/webp;base64,${parts.join('')}`;
  };

  const WAboutWithTeamPhoto = () => {
    React.useEffect(() => {
      const target = document.querySelector('#w-about .w-about-img');
      const photo = getTeamPhoto();
      if (!target || !photo) return;

      target.classList.add('w-about-img--team-photo');
      target.style.backgroundImage = `url("${photo}")`;
      target.style.backgroundSize = 'cover';
      target.style.backgroundPosition = 'center center';
      target.style.backgroundRepeat = 'no-repeat';
    }, []);

    return (
      <>
        <style>{`
          #w-about .w-about-img.w-about-img--team-photo {
            min-height: 0 !important;
            aspect-ratio: 4 / 3;
            align-self: center;
            background-color: #0b0b0b;
          }
          #w-about .w-about-img.w-about-img--team-photo::before {
            content: '' !important;
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            background: linear-gradient(180deg, rgba(0,0,0,.03) 55%, rgba(0,0,0,.52) 100%);
          }
          #w-about .w-about-img.w-about-img--team-photo::after {
            z-index: 2;
          }
          #w-about .w-about-img.w-about-img--team-photo .w-about-img-tag,
          #w-about .w-about-img.w-about-img--team-photo .tag {
            z-index: 3;
          }
        `}</style>
        <OriginalWAbout />
      </>
    );
  };

  window.WAbout = WAboutWithTeamPhoto;
})();