/* global React */
const { useEffect: useEffectS5, useRef: useRefS5, useState: useStateS5 } = React;

function useRevealS5(threshold = 0.15) {
  const ref = useRefS5(null);
  useEffectS5(() => {
    if (!ref.current) return;
    const el = ref.current;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) el.classList.add('in'); });
    }, { threshold });
    io.observe(el);
    return () => io.disconnect();
  }, [threshold]);
  return ref;
}

// 5 — Private Studios (commercial priority)
function PrivateStudiosSection() {
  const t = (window.useT && window.useT()) || ((k) => k);
  const ref = useRevealS5(0.1);
  const features = t('studios.features') || [];
  const cards = t('studios.cards') || [];

  return (
    <section ref={ref} id="private-studios" className="reveal section on-dark" style={{
      position: 'relative', overflow: 'hidden',
    }}>
      <div className="aspace-eyebrow" style={{ color: 'var(--aspace-on-dark-quiet)', marginBottom: 24 }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
          <span className="aspace-plus" /> {t('studios.eyebrow')}
        </span>
      </div>
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'minmax(0, 1.4fr) minmax(280px, 1fr)',
        gap: 'clamp(32px, 6vw, 80px)',
        alignItems: 'flex-end',
      }} className="ps-head">
        <h2 style={{
          margin: 0,
          fontFamily: "'Inter Tight', sans-serif",
          fontWeight: 500,
          fontSize: 'clamp(40px, 6.4vw, 110px)',
          lineHeight: 0.95,
          letterSpacing: '-0.03em',
          color: '#fff',
          textWrap: 'balance',
        }}>
          {t('studios.headlinePre')}<span className="blue-swipe">{t('studios.headlineHi')}</span>{t('studios.headlinePost')}
        </h2>
        <p style={{ color: 'rgba(255,255,255,0.7)', fontSize: 'clamp(15px, 1.2vw, 18px)', maxWidth: 420, lineHeight: 1.5 }}>
          {t('studios.copy')}
        </p>
      </div>

      {/* Featured studios row */}
      <div style={{
        marginTop: 'clamp(48px, 8vw, 96px)',
        display: 'grid',
        gridTemplateColumns: 'repeat(12, 1fr)',
        gap: 16,
      }} className="ps-grid">
        <article className="studio-card" style={{ gridColumn: 'span 7', aspectRatio: '4/3', position: 'relative' }}>
          <div className="photo-placeholder studio">
            {cards[0] && cards[0].badge && (
              <div style={{ position: 'absolute', top: 16, left: 16 }}>
                <span className="available-badge"><span className="dot" />{cards[0].badge}</span>
              </div>
            )}
            <div style={{ position: 'absolute', left: 22, bottom: 22, color: '#fff' }}>
              <div className="aspace-eyebrow" style={{ color: 'rgba(255,255,255,0.55)' }}>{cards[0] && cards[0].eyebrow}</div>
              <div style={{ fontSize: 'clamp(22px, 2.4vw, 36px)', fontWeight: 500, letterSpacing: '-0.01em', marginTop: 6 }}>
                {cards[0] && cards[0].name}
              </div>
              <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.7)', marginTop: 4 }}>{cards[0] && cards[0].meta}</div>
            </div>
          </div>
        </article>
        <article className="studio-card" style={{ gridColumn: 'span 5', aspectRatio: '4/3', position: 'relative' }}>
          <div className="photo-placeholder warm">
            {cards[1] && cards[1].badge && (
              <div style={{ position: 'absolute', top: 16, left: 16 }}>
                <span className="available-badge"><span className="dot" />{cards[1].badge}</span>
              </div>
            )}
            <div style={{ position: 'absolute', left: 22, bottom: 22, color: '#fff' }}>
              <div className="aspace-eyebrow" style={{ color: 'rgba(255,255,255,0.55)' }}>{cards[1] && cards[1].eyebrow}</div>
              <div style={{ fontSize: 'clamp(22px, 2.4vw, 36px)', fontWeight: 500, letterSpacing: '-0.01em', marginTop: 6 }}>
                {cards[1] && cards[1].name}
              </div>
              <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.7)', marginTop: 4 }}>{cards[1] && cards[1].meta}</div>
            </div>
          </div>
        </article>
        <article className="studio-card" style={{ gridColumn: 'span 4', aspectRatio: '1/1', position: 'relative' }}>
          <div className="photo-placeholder cyan">
            <div style={{ position: 'absolute', left: 22, bottom: 22, color: '#fff' }}>
              <div className="aspace-eyebrow" style={{ color: 'rgba(255,255,255,0.55)' }}>{cards[2] && cards[2].eyebrow}</div>
              <div style={{ fontSize: 22, fontWeight: 500, marginTop: 6 }}>{cards[2] && cards[2].name}</div>
              <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.7)', marginTop: 4 }}>{cards[2] && cards[2].meta}</div>
            </div>
          </div>
        </article>
        <article className="studio-card" style={{ gridColumn: 'span 4', aspectRatio: '1/1', position: 'relative' }}>
          <div className="photo-placeholder bone">
            <div style={{ position: 'absolute', left: 22, bottom: 22, color: '#0A0A0B' }}>
              <div className="aspace-eyebrow" style={{ color: 'rgba(0,0,0,0.55)' }}>{cards[3] && cards[3].eyebrow}</div>
              <div style={{ fontSize: 22, fontWeight: 500, marginTop: 6 }}>{cards[3] && cards[3].name}</div>
              <div style={{ fontSize: 13, color: 'rgba(0,0,0,0.7)', marginTop: 4 }}>{cards[3] && cards[3].meta}</div>
            </div>
          </div>
        </article>
        <article className="studio-card" style={{ gridColumn: 'span 4', aspectRatio: '1/1', position: 'relative' }}>
          <div className="photo-placeholder rose">
            <div style={{ position: 'absolute', left: 22, bottom: 22, color: '#fff' }}>
              <div className="aspace-eyebrow" style={{ color: 'rgba(255,255,255,0.55)' }}>{cards[4] && cards[4].eyebrow}</div>
              <div style={{ fontSize: 22, fontWeight: 500, marginTop: 6 }}>{cards[4] && cards[4].name}</div>
              <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.7)', marginTop: 4 }}>{cards[4] && cards[4].meta}</div>
            </div>
          </div>
        </article>
      </div>

      {/* features list */}
      <div style={{
        marginTop: 'clamp(48px, 7vw, 96px)',
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
        gap: 0,
        borderTop: '1px solid rgba(255,255,255,0.12)',
      }}>
        {features.map((f, i) => (
          <div key={i} style={{
            padding: 'clamp(24px, 3vw, 36px) clamp(20px, 2.5vw, 32px)',
            borderRight: '1px solid rgba(255,255,255,0.12)',
            borderBottom: '1px solid rgba(255,255,255,0.12)',
          }}>
            <div style={{ fontSize: 11, color: 'var(--aspace-blue)', letterSpacing: '0.16em', textTransform: 'uppercase', marginBottom: 16 }}>
              0{i + 1}
            </div>
            <h3 style={{ margin: 0, fontSize: 'clamp(18px, 1.6vw, 22px)', fontWeight: 500, color: '#fff', letterSpacing: '-0.01em' }}>{f.t}</h3>
            <p style={{ margin: '8px 0 0', fontSize: 14, color: 'rgba(255,255,255,0.6)', lineHeight: 1.5 }}>{f.d}</p>
          </div>
        ))}
      </div>

      {/* CTA row */}
      <div style={{
        marginTop: 'clamp(48px, 6vw, 80px)',
        display: 'flex', gap: 14, flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <a className="aspace-pill on-dark solid" href="#contact">
            {t('studios.ctaPrimary')}
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
          </a>
          <a className="aspace-pill on-dark" href="#offer-grid">{t('studios.ctaSecondary')}</a>
        </div>
        <div style={{ color: 'rgba(255,255,255,0.55)', fontSize: 13, letterSpacing: '0.04em' }}>
          {t('studios.ctaStatus')}
        </div>
      </div>

      <style>{`
        @media (max-width: 800px) {
          .ps-head { grid-template-columns: 1fr !important; }
          .ps-grid article { grid-column: span 12 !important; aspect-ratio: 4/3 !important; }
        }
      `}</style>
    </section>
  );
}

// 6 — OfferGrid: What you can do at ASPACE
/* ===================================================================
   OfferGrid — pinned horizontal scroll.

   Desktop / pointer: vertical scroll drives a horizontal translate of
   the card track. While the section is in the pin range, the page does
   not advance — once the track has finished travelling, the page
   continues vertically. Mirrors the Apple / Stripe scroll-stage idiom
   and fits the editorial / cinematic tone of the site.

   Mobile (≤ 760px) and prefers-reduced-motion: graceful fallback to
   native horizontal swipe with scroll-snap. No scroll hijacking on
   touch — that would break the back-swipe gesture and feel hostile.
   ================================================================ */
function OfferGrid() {
  const tr = (window.useT && window.useT()) || ((k) => k);
  const TONES = ['studio', 'warm', 'ink', 'cyan', 'bone', 'rose', 'studio', 'warm'];
  const offers = ((tr('offer.cards') || []).slice(0, 8)).map((c, i) => ({ ...c, tone: TONES[i] }));

  const sectionRef = useRefS5(null);
  const stageRef   = useRefS5(null);
  const trackRef   = useRefS5(null);
  const [pinDistance, setPinDistance] = useStateS5(0);
  const [translate,   setTranslate]   = useStateS5(0);
  const [progress,    setProgress]    = useStateS5(0);
  const [isPinned,    setIsPinned]    = useStateS5(false);

  // Use native swipe under 900px (covers most phones + small tablets in
  // portrait) or when the user prefers reduced motion.
  const useNativeSwipe = useStateS5(() => {
    if (typeof window === 'undefined') return false;
    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    const small   = window.innerWidth < 900;
    return reduced || small;
  })[0];

  useEffectS5(() => {
    if (useNativeSwipe) return;
    const measure = () => {
      const track = trackRef.current;
      const stage = stageRef.current;
      if (!track || !stage) return;
      // Distance the track must travel left to expose its right edge.
      const overflow = Math.max(0, track.scrollWidth - stage.clientWidth);
      setPinDistance(overflow);
    };
    measure();
    window.addEventListener('resize', measure);
    return () => window.removeEventListener('resize', measure);
  }, [useNativeSwipe, offers.length]);

  useEffectS5(() => {
    if (useNativeSwipe) return;
    const section = sectionRef.current;
    if (!section) return;
    const onScroll = () => {
      const rect = section.getBoundingClientRect();
      const vh   = window.innerHeight;
      const pin  = section.offsetHeight - vh;
      const scrolled = Math.max(0, Math.min(pin, -rect.top));
      const p = pin > 0 ? scrolled / pin : 0;
      setProgress(p);
      setTranslate(p * pinDistance);
      setIsPinned(p > 0.001 && p < 0.999);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, [useNativeSwipe, pinDistance]);

  const sectionHeight = useNativeSwipe ? 'auto' : `calc(100vh + ${pinDistance}px)`;

  return (
    <section
      ref={sectionRef}
      id="offer-grid"
      style={{
        background: 'var(--aspace-bg)',
        position: 'relative',
        height: sectionHeight,
      }}
    >
      <div
        ref={stageRef}
        style={useNativeSwipe ? {
          padding: 'clamp(60px, 8vw, 120px) 0',
        } : {
          position: 'sticky', top: 0,
          height: '100vh',
          display: 'flex', flexDirection: 'column',
          justifyContent: 'flex-start',
          overflow: 'hidden',
          paddingTop: 'clamp(60px, 8vw, 100px)',
        }}
      >
        {/* Header — stays visible while the cards slide past on desktop */}
        <div style={{
          display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
          flexWrap: 'wrap', gap: 24,
          padding: '0 var(--gutter)',
          marginBottom: 'clamp(32px, 4vw, 56px)',
        }}>
          <div>
            <div className="aspace-eyebrow" style={{ marginBottom: 18 }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
                <span className="aspace-plus" /> {tr('offer.eyebrow')}
              </span>
            </div>
            <h2 style={{
              margin: 0,
              fontFamily: "'Inter Tight', sans-serif",
              fontWeight: 500,
              fontSize: 'clamp(40px, 6vw, 100px)',
              lineHeight: 0.95,
              letterSpacing: '-0.03em',
              maxWidth: '14ch',
            }}>
              {tr('offer.headline')}
            </h2>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16, maxWidth: 360 }}>
            <p style={{ margin: 0, color: 'var(--aspace-quiet)', fontSize: 16, lineHeight: 1.5 }}>
              {tr('offer.copy')}
            </p>
            {!useNativeSwipe && (
              <div className="offer-scroll-cue" aria-hidden="true" style={{
                display: 'inline-flex', alignItems: 'center', gap: 10,
                fontSize: 10.5, letterSpacing: '0.28em', textTransform: 'uppercase',
                color: 'rgba(10,10,11,0.42)',
                opacity: progress < 0.95 ? 1 : 0,
                transition: 'opacity 360ms cubic-bezier(0.22,1,0.36,1)',
              }}>
                <span>Scroll</span>
                <span style={{
                  position: 'relative',
                  flex: 1, width: 90, height: 1,
                  background: 'rgba(10,10,11,0.14)',
                  overflow: 'hidden',
                }}>
                  <span style={{
                    position: 'absolute', left: 0, top: 0, bottom: 0,
                    width: '100%',
                    transform: `scaleX(${progress})`,
                    transformOrigin: 'left',
                    background: 'var(--aspace-blue)',
                    transition: 'transform 120ms linear',
                  }}/>
                </span>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
                  <path d="M5 12h14M13 6l6 6-6 6"/>
                </svg>
              </div>
            )}
          </div>
        </div>

        {/* Track — translates left on desktop, scrolls natively on mobile */}
        <div
          ref={trackRef}
          className={useNativeSwipe ? 'offer-track-native' : 'offer-track-pinned'}
          style={useNativeSwipe ? {
            display: 'flex', gap: 16,
            padding: '0 var(--gutter) 8px',
            overflowX: 'auto',
            overflowY: 'hidden',
            scrollSnapType: 'x mandatory',
            WebkitOverflowScrolling: 'touch',
            scrollbarWidth: 'none',
          } : {
            display: 'flex', gap: 'clamp(14px, 1.6vw, 24px)',
            padding: '0 var(--gutter)',
            transform: `translate3d(-${translate}px, 0, 0)`,
            willChange: 'transform',
            transition: isPinned ? 'none' : 'transform 320ms cubic-bezier(0.22,1,0.36,1)',
          }}
        >
          {offers.map((o, i) => (
            <div key={o.t} style={{
              flex: '0 0 auto',
              width: useNativeSwipe ? 'min(78vw, 320px)' : 'clamp(260px, 24vw, 340px)',
              scrollSnapAlign: 'start',
            }}>
              <OfferCard offer={o} index={i} />
            </div>
          ))}
        </div>
      </div>

      <style>{`
        .offer-track-native::-webkit-scrollbar { display: none; }
      `}</style>
    </section>
  );
}

function OfferCard({ offer, index }) {
  const [hover, setHover] = useStateS5(false);
  return (
    <article
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        position: 'relative',
        aspectRatio: '4/5',
        borderRadius: 18,
        overflow: 'hidden',
        cursor: 'pointer',
        background: '#000',
      }}
    >
      <div className={"photo-placeholder " + offer.tone} style={{
        position: 'absolute', inset: 0,
        transform: hover ? 'scale(1.06)' : 'scale(1)',
        transition: 'transform 1100ms var(--ease-cinema)',
      }} />
      {/* gradient overlay */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.0) 50%)',
      }} />
      {/* blue accent line bottom */}
      <div style={{
        position: 'absolute', left: 22, right: 22, bottom: 76,
        height: 1, background: 'var(--aspace-blue)',
        transformOrigin: 'left',
        transform: hover ? 'scaleX(1)' : 'scaleX(0.18)',
        transition: 'transform 700ms var(--ease-cinema)',
        boxShadow: '0 0 8px rgba(0,194,255,0.6)',
      }} />
      {/* content */}
      <div style={{
        position: 'absolute', left: 22, right: 22, bottom: 22, color: '#fff',
      }}>
        <div className="aspace-eyebrow" style={{ color: 'rgba(255,255,255,0.55)', marginBottom: 10 }}>
          0{index + 1}
        </div>
        <h3 style={{
          margin: 0, fontSize: 'clamp(20px, 2vw, 28px)', fontWeight: 500, letterSpacing: '-0.01em',
        }}>{offer.t}</h3>
        <p style={{
          margin: '8px 0 0', fontSize: 14, color: 'rgba(255,255,255,0.7)', lineHeight: 1.45,
          maxHeight: hover ? 80 : 0,
          opacity: hover ? 1 : 0.0,
          overflow: 'hidden',
          transition: 'max-height 600ms var(--ease-cinema), opacity 400ms ease',
        }}>{offer.d}</p>
      </div>
      {/* arrow corner */}
      <div style={{
        position: 'absolute', right: 16, top: 16,
        width: 36, height: 36, borderRadius: '50%',
        border: '1px solid rgba(255,255,255,0.4)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        color: '#fff',
        background: hover ? 'var(--aspace-blue)' : 'transparent',
        borderColor: hover ? 'var(--aspace-blue)' : 'rgba(255,255,255,0.4)',
        transition: 'background 360ms ease, border-color 360ms ease',
      }}>
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke={hover ? '#000' : 'currentColor'} strokeWidth="1.8">
          <path d="M7 17L17 7M9 7h8v8"/>
        </svg>
      </div>
    </article>
  );
}

/* ===================================================================
   CreativeHub — editorial photo gallery section.

   One large feature image on the left, three stacked images on the
   right (~1.18fr / 0.82fr). Cream background carries the same hue as
   the rest of the light sections. Subtle hover-lift on each frame —
   no additional motion since the photography is the message.

   Mobile: gallery collapses to a single column; the feature gets a
   16:11 aspect, stack items 16:10.
   ================================================================ */
function CreativeHubSection() {
  const tr = (window.useT && window.useT()) || ((k) => k);
  const PHOTOS = [
    { src: '/site/uploads/hub-led-wall.jpg',     alt: 'ASPACE — LED wall stage with virtual production setup', feature: true },
    { src: '/site/uploads/hub-baseline.jpg',     alt: 'ASPACE — projection set with apparel mockup' },
    { src: '/site/uploads/hub-husky.jpg',        alt: 'ASPACE — creative shoot in front of LED panel' },
    { src: '/site/uploads/hub-photographer.jpg', alt: 'ASPACE — photographer at work, digital overlay' },
  ];
  const [feature, ...stack] = PHOTOS;
  return (
    <section
      id="creative-hub"
      aria-label="Creative hub"
      style={{
        background: 'var(--aspace-bg)',
        color: 'var(--aspace-ink)',
        padding: 'clamp(80px, 12vh, 160px) var(--gutter)',
      }}
    >
      <div style={{ width: 'min(1280px, 100%)', marginInline: 'auto' }}>
        {/* Header */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr auto',
          alignItems: 'end',
          columnGap: 'clamp(24px, 5vw, 80px)',
          rowGap: 'clamp(18px, 3vw, 28px)',
          marginBottom: 'clamp(28px, 4vw, 56px)',
        }} className="hub-head">
          <div className="aspace-eyebrow" style={{
            gridColumn: '1 / -1',
            display: 'inline-flex', alignItems: 'center', gap: 12,
          }}>
            <span className="aspace-plus" /> {tr('hub.eyebrow')}
          </div>
          <h2 style={{
            gridColumn: 1, margin: 0,
            fontFamily: "'Inter Tight', sans-serif",
            fontWeight: 500,
            fontSize: 'clamp(2.6rem, 7.6vw, 6.4rem)',
            lineHeight: 0.92,
            letterSpacing: '-0.03em',
            textWrap: 'balance',
          }}>
            {tr('hub.headlineA')}<br/>
            {tr('hub.headlineB1')}<span style={{ color: 'var(--aspace-blue)' }}>{tr('hub.headlineB2')}</span>
          </h2>
          <p className="hub-lead" style={{
            gridColumn: 2, maxWidth: '30ch', margin: '0 0 6px',
            fontSize: 'clamp(15px, 1.15vw, 18px)',
            lineHeight: 1.5,
            color: 'var(--aspace-quiet)',
            textWrap: 'pretty',
          }}>
            {tr('hub.copy')}
          </p>
        </div>

        {/* Gallery — feature + stack of 3 */}
        <div className="hub-gallery" style={{
          display: 'grid',
          gridTemplateColumns: '1.18fr 0.82fr',
          gap: 'clamp(10px, 1vw, 16px)',
          height: 'clamp(440px, 47vw, 660px)',
        }}>
          <HubPhoto src={feature.src} alt={feature.alt} className="hub-feature" />
          <div className="hub-stack" style={{
            display: 'grid',
            gridTemplateRows: 'repeat(3, 1fr)',
            gap: 'clamp(10px, 1vw, 16px)',
            minHeight: 0,
          }}>
            {stack.map(p => <HubPhoto key={p.src} src={p.src} alt={p.alt} />)}
          </div>
        </div>
      </div>

      <style>{`
        .hub-gallery .hub-photo {
          display: block;
          width: 100%; height: 100%; min-height: 0;
          background: #d4d3ca;
          border-radius: 2px;
          overflow: hidden;
          box-shadow: 0 1px 0 rgba(255,255,255,0.4), 0 0 0 1px rgba(11,11,11,0.08);
          transition: transform 500ms cubic-bezier(0.22,0.61,0.36,1), box-shadow 500ms ease;
          cursor: pointer;
        }
        .hub-gallery .hub-photo img {
          width: 100%; height: 100%; object-fit: cover; display: block;
          transition: transform 800ms cubic-bezier(0.22,0.61,0.36,1);
        }
        .hub-gallery .hub-photo:hover {
          transform: translateY(-4px);
          box-shadow: 0 18px 40px -22px rgba(11,11,11,0.55), 0 0 0 1px rgba(11,11,11,0.16);
        }
        .hub-gallery .hub-photo:hover img { transform: scale(1.04); }

        @media (max-width: 760px) {
          .hub-head { grid-template-columns: 1fr !important; align-items: start !important; }
          .hub-head .hub-lead { grid-column: 1 !important; max-width: 42ch !important; }
          .hub-gallery {
            grid-template-columns: 1fr !important;
            height: auto !important;
          }
          .hub-gallery .hub-feature { aspect-ratio: 16 / 11; }
          .hub-gallery .hub-stack {
            grid-template-rows: none !important;
          }
          .hub-gallery .hub-stack .hub-photo { aspect-ratio: 16 / 10; }
        }
        @media (prefers-reduced-motion: reduce) {
          .hub-gallery .hub-photo,
          .hub-gallery .hub-photo img { transition: none !important; }
          .hub-gallery .hub-photo:hover { transform: none !important; }
          .hub-gallery .hub-photo:hover img { transform: none !important; }
        }
      `}</style>
    </section>
  );
}

function HubPhoto({ src, alt, className }) {
  return (
    <div className={'hub-photo ' + (className || '')}>
      <img src={src} alt={alt} loading="lazy" />
    </div>
  );
}

window.PrivateStudiosSection = PrivateStudiosSection;
window.OfferGrid = OfferGrid;
window.CreativeHubSection = CreativeHubSection;