/* global React */
const { useEffect: useEffectSec, useRef: useRefSec, useState: useStateSec, useMemo: useMemoSec } = React;

/* ===================================================================
   LIVE ATMOSPHERE — floating glass condition card.
   A spatial sensor reading the studio's mood: light, weather, energy.
   Replaces the old flat cyan accent tile in the hero.

   Visual model:
     · Smoked-graphite glass with deep cyan haze (NOT a flat blue rect)
     · Layered radial gradients + reflection + atmospheric SVG noise
     · Breathing scale + subtle floating drift
     · Content rotates every ~9s through 6 states with blurred crossfade
     · Hover sharpens the glass, deepens glow, runs a soft reflection sweep
   ================================================================ */

function LiveAtmosphereCard() {
  const STATES = useMemoSec(() => ([
    { primary: 'Soft north light',     env: '18°C · Overcast',         mood: 'Perfect for editorials' },
    { primary: 'Rain mode',            env: '14°C · Steady drizzle',   mood: 'Perfect audio conditions' },
    { primary: 'Morning shadows',      env: '17°C · Bright',           mood: 'Long graphic lines' },
    { primary: 'Diffused light',       env: '19°C · Overcast',         mood: 'Even all day' },
    { primary: 'Quiet creative hours', env: '20°C · Calm',             mood: 'Low footfall · deep work' },
  ]), []);

  const [hover, setHover]   = useStateSec(false);
  const [idx, setIdx]       = useStateSec(0);
  const [phase, setPhase]   = useStateSec('in'); // 'in' | 'out'
  const reduced = useMemoSec(() => typeof window !== 'undefined'
    ? window.matchMedia('(prefers-reduced-motion: reduce)').matches : false, []);

  // Rotate states with a clean fade-out → swap → fade-in cycle
  useEffectSec(() => {
    if (reduced) return;
    let cancelled = false;
    const tick = () => {
      if (cancelled) return;
      setPhase('out');
      setTimeout(() => {
        if (cancelled) return;
        setIdx(i => (i + 1) % STATES.length);
        setPhase('in');
      }, 700);
    };
    const t = setInterval(tick, 9000);
    return () => { cancelled = true; clearInterval(t); };
  }, [reduced, STATES.length]);

  const s = STATES[idx];
  const blue = 'var(--aspace-blue, #00C2FF)';

  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      role="status"
      aria-live="polite"
      aria-label={'Live studio atmosphere — ' + s.primary + '. ' + s.env + '. ' + s.mood + '.'}
      className="aspace-atm-card"
      style={{
        position: 'absolute',
        right: '5%', bottom: '7%',
        width:  'clamp(220px, 23vw, 300px)',
        height: 'clamp(170px, 19vw, 240px)',
        borderRadius: 'clamp(20px, 2vw, 28px)',
        overflow: 'hidden',
        // Outer parallax driven by hero scroll var, then we wrap an inner
        // <div> that handles the breath/drift so transforms compose cleanly.
        transform: 'translateY(calc(var(--pyMid, 0px) * -1))',
        willChange: 'transform',
        // Parent layered-media wrapper has pointer-events: none — re-enable
        // it here so the card can register hover and the reflection sweep.
        pointerEvents: 'auto',
        // Sit above sibling photo cards in the parallax layer so labels
        // like "Private creative room — North wing" don't bleed through.
        zIndex: 5,
        isolation: 'isolate',
        // Sibling .photo-label elements use z-index: 2 inside their cards.
        // Lift this one above so the studio image labels never bleed through
        // the glass when they happen to land in the same screen region.
        zIndex: 5,
        // Establish a fresh stacking context (isolation) so backdrop-filter
        // doesn't punch through to non-background siblings either.
        isolation: 'isolate',
        // Outer glow + lifted shadow — the "ambient bloom" of a glass object
        boxShadow: hover
          ? '0 24px 60px -22px rgba(0,0,0,0.55), 0 0 56px -8px rgba(0,194,255,0.30), 0 1px 0 rgba(255,255,255,0.12) inset'
          : '0 18px 42px -20px rgba(0,0,0,0.48), 0 0 36px -10px rgba(0,194,255,0.18), 0 1px 0 rgba(255,255,255,0.08) inset',
        transition: 'box-shadow 720ms cubic-bezier(0.22,1,0.36,1)',
      }}
    >
      {/* INNER WRAPPER — owns the breath + drift animation so the parent
          can keep its parallax transform untouched. */}
      <div className="aspace-atm-inner" style={{
        position: 'absolute', inset: 0,
        animation: reduced ? 'none' : 'aspaceAtmBreath 11s ease-in-out infinite',
        willChange: 'transform, filter',
      }}>
        {/* LAYER 1 — solid smoked graphite base.
            Fully opaque so no sibling text (e.g. studio photo-labels with their
            own z-index stacking contexts) can bleed through compositing. The
            "glass" feeling comes from the layered gradients + reflection +
            chromatic shimmer painted on top of this base, not from translucency. */}
        <div aria-hidden="true" style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(155deg, #161E2A 0%, #0A111A 100%)',
          border: '1px solid rgba(255,255,255,0.12)',
          borderRadius: 'inherit',
        }}/>

        {/* LAYER 2 — deep cyan atmospheric haze (off-centre, asymmetric) */}
        <div aria-hidden="true" style={{
          position: 'absolute', inset: 0,
          background:
            'radial-gradient(140% 90% at 18% 8%, rgba(0,194,255,0.30) 0%, transparent 55%),' +
            'radial-gradient(120% 100% at 90% 95%, rgba(0,140,200,0.22) 0%, transparent 60%),' +
            'radial-gradient(60% 60% at 80% 12%, rgba(170,200,255,0.10) 0%, transparent 70%)',
          opacity: hover ? 1 : 0.92,
          transition: 'opacity 720ms cubic-bezier(0.22,1,0.36,1)',
        }}/>

        {/* LAYER 3 — slow drifting cyan blob (the "alive" feel) */}
        <div aria-hidden="true" style={{
          position: 'absolute',
          inset: '-30%',
          background: 'radial-gradient(40% 32% at 50% 50%, rgba(0,194,255,0.18) 0%, transparent 70%)',
          animation: reduced ? 'none' : 'aspaceAtmDrift 18s ease-in-out infinite alternate',
          mixBlendMode: 'screen',
        }}/>

        {/* LAYER 4 — top reflection / chromatic shimmer */}
        <div aria-hidden="true" style={{
          position: 'absolute', inset: 0,
          background:
            'linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 24%),' +
            'linear-gradient(135deg, rgba(180,210,255,0.10) 0%, transparent 50%)',
          mixBlendMode: 'screen',
          opacity: 0.9,
        }}/>

        {/* LAYER 5 — atmospheric noise grain via SVG turbulence */}
        <svg aria-hidden="true" width="100%" height="100%"
          style={{ position: 'absolute', inset: 0, opacity: 0.18, mixBlendMode: 'overlay', pointerEvents: 'none' }}>
          <filter id="aspace-atm-noise">
            <feTurbulence type="fractalNoise" baseFrequency="1.2" numOctaves="2" seed="11"/>
            <feColorMatrix values="0 0 0 0 0.75  0 0 0 0 0.85  0 0 0 0 1.0  0 0 0 0.5 0"/>
          </filter>
          <rect width="100%" height="100%" filter="url(#aspace-atm-noise)"/>
        </svg>

        {/* LAYER 6 — soft spectrum bar at the bottom (architectural detail) */}
        <svg aria-hidden="true" width="100%" height="40"
          viewBox="0 0 300 40" preserveAspectRatio="none"
          style={{
            position: 'absolute', left: 0, right: 0, bottom: 0,
            opacity: 0.35, pointerEvents: 'none',
          }}>
          <defs>
            <linearGradient id="aspace-atm-spec" x1="0" y1="0" x2="1" y2="0">
              <stop offset="0%"  stopColor="rgba(0,194,255,0)"/>
              <stop offset="35%" stopColor="rgba(0,194,255,0.55)"/>
              <stop offset="65%" stopColor="rgba(180,200,255,0.55)"/>
              <stop offset="100%" stopColor="rgba(180,200,255,0)"/>
            </linearGradient>
          </defs>
          <path d="M 0 30 Q 60 18, 110 26 T 220 22 T 300 28 L 300 40 L 0 40 Z"
            fill="url(#aspace-atm-spec)"/>
        </svg>

        {/* LAYER 7 — reflection sweep (only animates on hover) */}
        <div aria-hidden="true" className="aspace-atm-sweep" style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(115deg, transparent 36%, rgba(255,255,255,0.08) 50%, transparent 64%)',
          transform: hover ? 'translateX(60%)' : 'translateX(-100%)',
          transition: 'transform 1400ms cubic-bezier(0.22,1,0.36,1)',
          mixBlendMode: 'screen',
          pointerEvents: 'none',
        }}/>
      </div>

      {/* CONTENT — sits above all the atmospheric layers */}
      <div style={{
        position: 'relative', zIndex: 5,
        height: '100%',
        padding: 'clamp(16px, 1.6vw, 22px)',
        display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
      }}>
        {/* Top — micro label with breathing dot */}
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          fontFamily: "'Inter Tight', sans-serif",
          fontSize: 9.5, letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 500,
          color: 'rgba(255,255,255,0.62)',
        }}>
          <span aria-hidden="true" style={{
            position: 'relative', width: 6, height: 6, borderRadius: '50%',
            background: blue,
            boxShadow: '0 0 12px ' + blue,
            animation: reduced ? 'none' : 'aspaceAtmDot 2.4s ease-in-out infinite',
          }}/>
          Live atmosphere
        </div>

        {/* Middle — atmosphere statement (rotates) */}
        <div style={{
          display: 'flex', flexDirection: 'column', gap: 6,
          // Crossfade with subtle blur — like the studio re-reading the air
          opacity: phase === 'in' ? 1 : 0,
          filter: phase === 'in' ? 'blur(0)' : 'blur(6px)',
          transform: phase === 'in' ? 'translateY(0)' : 'translateY(4px)',
          transition: 'opacity 700ms cubic-bezier(0.22,1,0.36,1), filter 700ms cubic-bezier(0.22,1,0.36,1), transform 700ms cubic-bezier(0.22,1,0.36,1)',
        }}>
          <h3 style={{
            margin: 0,
            fontFamily: "'Inter Tight', sans-serif",
            fontWeight: 500,
            fontSize: 'clamp(15px, 1.5vw, 19px)',
            letterSpacing: '-0.01em',
            color: '#fff',
            textTransform: 'uppercase',
          }}>{s.primary}</h3>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 8,
            flexWrap: 'wrap',
            fontFamily: "'Inter Tight', sans-serif",
            fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase',
            color: 'rgba(255,255,255,0.62)',
          }}>
            <span>{s.env}</span>
          </div>
        </div>

        {/* Bottom — supporting mood line (more emphasized in blue) */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 8,
          opacity: phase === 'in' ? 1 : 0,
          filter: phase === 'in' ? 'blur(0)' : 'blur(4px)',
          transition: 'opacity 700ms cubic-bezier(0.22,1,0.36,1) 80ms, filter 700ms cubic-bezier(0.22,1,0.36,1) 80ms',
        }}>
          <span aria-hidden="true" style={{
            width: 16, height: 1, background: blue, opacity: 0.7,
            boxShadow: '0 0 8px ' + blue,
          }}/>
          <span style={{
            fontFamily: "'Inter Tight', sans-serif",
            fontSize: 10.5, letterSpacing: '0.20em', textTransform: 'uppercase', fontWeight: 500,
            color: 'rgba(190,225,255,0.92)',
          }}>{s.mood}</span>
        </div>
      </div>

      <style>{`
        @keyframes aspaceAtmBreath {
          0%, 100% { transform: scale(1) translateY(0);    filter: brightness(1); }
          50%      { transform: scale(1.012) translateY(-2px); filter: brightness(1.04); }
        }
        @keyframes aspaceAtmDrift {
          0%   { transform: translate(-12%, -8%) scale(1); }
          100% { transform: translate(12%, 6%)  scale(1.18); }
        }
        @keyframes aspaceAtmDot {
          0%, 100% { transform: scale(1);    opacity: 1;    box-shadow: 0 0 10px var(--aspace-blue, #00C2FF); }
          50%      { transform: scale(1.45); opacity: 0.65; box-shadow: 0 0 18px var(--aspace-blue, #00C2FF); }
        }
        @media (prefers-reduced-motion: reduce) {
          .aspace-atm-card .aspace-atm-inner,
          .aspace-atm-card .aspace-atm-sweep { animation: none !important; transition: none !important; }
        }
      `}</style>
    </div>
  );
}
window.LiveAtmosphereCard = LiveAtmosphereCard;

// IntersectionObserver wrapper that flips a `.in` class on its target.
function useReveal(threshold = 0.15) {
  const ref = useRefSec(null);
  useEffectSec(() => {
    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;
}

/* Kinetic button text — splits a label into per-letter spans so each
   letter can flip + settle in sequence on hover. The visible spans are
   aria-hidden and the parent <a>/<button> exposes the full label via
   aria-label, so screen readers announce one clean word, not letters. */
function KineticText({ text }) {
  const chars = Array.from(text);
  return (
    <span className="kinetic-text" aria-hidden="true">
      {chars.map((ch, i) => (
        <span key={i} className="kinetic-letter" style={{ '--i': i }}>
          {ch === ' ' ? ' ' : ch}
        </span>
      ))}
    </span>
  );
}

// Hero
function HeroSection({ headline = 'YOUR IDEAS NEED SPACE' }) {
  const t = (window.useT && window.useT()) || ((k) => k);
  const ref = useReveal(0.05);
  const heroRef = useRefSec(null);

  useEffectSec(() => {
    if (!heroRef.current) return;
    const onScroll = () => {
      const y = window.scrollY;
      heroRef.current.style.setProperty('--py', `${y * 0.18}px`);
      heroRef.current.style.setProperty('--pyMid', `${y * 0.08}px`);
      heroRef.current.style.setProperty('--pyFast', `${y * 0.32}px`);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const words = headline.split(' ');

  return (
    <section ref={heroRef} className="on-dark" data-aurora="hero" style={{
      position: 'relative', minHeight: '100vh',
      padding: 'calc(var(--gutter) + 80px) var(--gutter) var(--gutter)',
      overflow: 'hidden',
    }}>
      {/* layered media on the right */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
      }} aria-hidden="true">
        {/* big media card */}
        <div style={{
          position: 'absolute',
          right: 'clamp(20px, 5vw, 80px)', top: '18%',
          width: 'clamp(260px, 32vw, 460px)', height: 'clamp(360px, 46vw, 620px)',
          borderRadius: 18, overflow: 'hidden',
          transform: 'translateY(calc(var(--py, 0px) * -1))',
          willChange: 'transform',
          boxShadow: '0 30px 80px rgba(0,0,0,0.5)',
        }}>
          <div className="photo-placeholder studio">
            <div className="photo-corner">{t('hero.photoStudio.corner')}</div>
            <div className="photo-label">{t('hero.photoStudio.label')}</div>
          </div>
        </div>
        {/* secondary media card */}
        <div style={{
          position: 'absolute',
          right: 'clamp(220px, 24vw, 380px)', top: '52%',
          width: 'clamp(180px, 22vw, 320px)', height: 'clamp(240px, 30vw, 420px)',
          borderRadius: 14, overflow: 'hidden',
          transform: 'translateY(calc(var(--pyFast, 0px) * -1))',
          willChange: 'transform',
          boxShadow: '0 30px 80px rgba(0,0,0,0.5)',
          border: '1px solid rgba(0,194,255,0.4)',
        }}>
          <div className="photo-placeholder warm">
            <div className="photo-corner">{t('hero.photoWarm.corner')}</div>
            <div className="photo-label">{t('hero.photoWarm.label')}</div>
          </div>
        </div>
      </div>

      {/*
        Live atmosphere card — moved OUT of the aria-hidden media wrapper into
        its own sibling container with z-index 1. The media wrapper above sits
        at z-index 0 (auto), the hero text below at z-index 2. The card sits
        between the two — visibly above the studio images but logically behind
        the headline, so the photo-label never bleeds through and the headline
        copy still wins focus.
      */}
      <div style={{ position: 'absolute', inset: 0, zIndex: 1, pointerEvents: 'none' }}>
        <div aria-hidden="true" style={{
          position: 'absolute',
          right: '5%', bottom: 'calc(7% - 22px)',
          fontFamily: "'Inter Tight', sans-serif",
          fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase',
          color: 'rgba(255,255,255,0.32)',
        }}>{t('hero.locationTag')}</div>
      </div>

      <div ref={ref} style={{ position: 'relative', zIndex: 2, paddingTop: 'clamp(40px, 8vh, 100px)' }}>
        <div className="aspace-eyebrow" style={{ color: 'rgba(255,255,255,0.55)', marginBottom: 32 }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--aspace-blue)', boxShadow: '0 0 10px var(--aspace-blue)' }} />
            {t('hero.eyebrow')}
          </span>
        </div>
        <h1 style={{
          margin: 0,
          fontFamily: "'Inter Tight', sans-serif",
          fontWeight: 500,
          fontSize: 'clamp(56px, 10.5vw, 180px)',
          lineHeight: 0.92,
          letterSpacing: '-0.035em',
          color: '#fff',
          maxWidth: '14ch',
          textWrap: 'balance',
        }}>
          {words.map((w, i) => (
            <React.Fragment key={i}>
              <span className="word-mask" style={{ '--word-delay': `${100 + i * 80}ms` }}>
                <span>{w}</span>
              </span>
              {i < words.length - 1 ? '\u00A0' : ''}
            </React.Fragment>
          ))}
        </h1>

        {/* SUPPORTING COPY — paragraph + signature line + CTA row.
            Refined for editorial breathing room: more vertical rhythm
            between blocks, signature line sized down so it reads as
            an emphasis/quote rather than a continuation. */}
        <div className="hero-supporting" style={{
          marginTop: 'clamp(40px, 5vw, 64px)',
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 1fr) auto',
          gap: 'clamp(32px, 4vw, 64px)',
          alignItems: 'flex-end',
          maxWidth: 980,
        }}>
          <div style={{ minWidth: 0 }}>
            {/* Main paragraph — slightly tighter measure for elegant wraps */}
            <p className="hero-copy-1" style={{
              margin: 0,
              color: 'rgba(255,255,255,0.78)',
              fontSize: 'clamp(15px, 1.15vw, 17.5px)',
              maxWidth: 'clamp(360px, 32ch, 420px)',
              lineHeight: 1.55,
              letterSpacing: '-0.002em',
              fontWeight: 400,
            }}>
              {t('hero.copyMain')}
            </p>

            {/* Signature line — editorial pull-quote with leading rule */}
            <p className="hero-copy-2" style={{
              margin: 'clamp(28px, 3vw, 40px) 0 0',
              display: 'inline-flex',
              alignItems: 'center',
              gap: 14,
              color: 'var(--aspace-blue)',
              fontSize: 'clamp(13px, 1vw, 15px)',
              letterSpacing: '0.005em',
              lineHeight: 1.5,
              fontWeight: 400,
            }}>
              <span aria-hidden="true" style={{
                display: 'inline-block',
                width: 28, height: 1,
                background: 'currentColor',
                opacity: 0.55,
                flexShrink: 0,
              }}/>
              {t('hero.copySignature')}
            </p>
          </div>

          {/* CTAs — kinetic hover: liquid blue fill, letters flip-and-settle,
              arrow glides. Primary is the loud one, secondary stays restrained. */}
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <a className="aspace-pill on-dark solid kinetic" href="#contact"
               aria-label={t('hero.ctaPrimary')}>
              <KineticText text={t('hero.ctaPrimary')}/>
              <svg className="pill-arrow" 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 kinetic" href="#offer-grid"
               aria-label={t('hero.ctaSecondary')}>
              <KineticText text={t('hero.ctaSecondary')}/>
            </a>
          </div>
        </div>

        {/* SCROLL CUE — softer, more atmospheric, anchored further from copy */}
        <a href="#offer-grid" className="hero-scroll-cue" style={{
          position: 'absolute',
          left: 0,
          bottom: 'clamp(-44px, -3.5vw, -20px)',
          display: 'inline-flex', alignItems: 'center', gap: 14,
          color: 'rgba(255,255,255,0.42)',
          fontSize: 10.5, letterSpacing: '0.28em', textTransform: 'uppercase',
          fontWeight: 400,
          textDecoration: 'none',
          transition: 'color 320ms cubic-bezier(0.22,1,0.36,1)',
        }}>
          <span className="hero-scroll-disc" aria-hidden="true" style={{
            position: 'relative',
            width: 28, height: 28, borderRadius: '50%',
            border: '1px solid rgba(255,255,255,0.20)',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            transition: 'border-color 320ms cubic-bezier(0.22,1,0.36,1), box-shadow 320ms cubic-bezier(0.22,1,0.36,1)',
          }}>
            <svg className="hero-scroll-arrow" width="11" height="11" viewBox="0 0 24 24"
              fill="none" stroke="currentColor" strokeWidth="1.2"
              strokeLinecap="round" strokeLinejoin="round">
              <path d="M12 5v14M6 13l6 6 6-6"/>
            </svg>
          </span>
          <span>{t('hero.scrollCue')}</span>
        </a>

        {/* Stagger reveals + scroll-cue float — kept light so motion never
            distracts from the headline (which already animates word-by-word).  */}
        <style>{`
          .hero-copy-1, .hero-copy-2, .hero-supporting > div + div, .hero-scroll-cue {
            opacity: 0;
            transform: translateY(10px);
            animation: heroSupportingIn 900ms cubic-bezier(0.22,1,0.36,1) forwards;
          }
          .hero-copy-1 { animation-delay: 350ms; }
          .hero-copy-2 { animation-delay: 520ms; }
          .hero-supporting > div + div { animation-delay: 600ms; }
          .hero-scroll-cue { animation-delay: 760ms; }
          @keyframes heroSupportingIn {
            from { opacity: 0; transform: translateY(10px); filter: blur(2px); }
            to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
          }
          /* Quiet downward float on the scroll arrow — luxe, not bouncy. */
          .hero-scroll-arrow {
            animation: heroScrollFloat 2.6s cubic-bezier(0.45,0,0.55,1) infinite;
          }
          @keyframes heroScrollFloat {
            0%, 100% { transform: translateY(0);   opacity: 1; }
            50%      { transform: translateY(2px); opacity: 0.55; }
          }
          .hero-scroll-cue:hover { color: rgba(255,255,255,0.85); }
          .hero-scroll-cue:hover .hero-scroll-disc {
            border-color: rgba(255,255,255,0.45);
            box-shadow: 0 0 0 1px rgba(0,194,255,0.18) inset, 0 0 22px rgba(0,194,255,0.18);
          }
          @media (max-width: 760px) {
            .hero-supporting { grid-template-columns: 1fr !important; }
          }
          @media (prefers-reduced-motion: reduce) {
            .hero-copy-1, .hero-copy-2, .hero-supporting > div + div,
            .hero-scroll-cue, .hero-scroll-arrow { animation: none !important; opacity: 1; transform: none; filter: none; }
          }
        `}</style>
      </div>
    </section>
  );
}

// 2 — ScrollDivider
function ScrollDivider() {
  const t = (window.useT && window.useT()) || ((k) => k);
  const ref = useReveal(0.2);
  return (
    <section ref={ref} className="reveal" style={{
      position: 'relative',
      padding: 'clamp(60px, 10vh, 140px) var(--gutter)',
      background: 'var(--aspace-bg)',
      borderTop: '1px solid var(--aspace-line)',
      borderBottom: '1px solid var(--aspace-line)',
    }}>
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 40,
        position: 'relative', zIndex: 2,
      }}>
        <div style={{ display: 'flex', gap: 40, color: 'var(--aspace-faint)' }}>
          <span className="aspace-plus" />
          <span className="aspace-plus" />
          <span className="aspace-plus" />
        </div>
        <div className="aspace-eyebrow" style={{ color: 'var(--aspace-quiet)' }}>
          {t('divider.label')}
        </div>
        <div style={{ display: 'flex', gap: 40, color: 'var(--aspace-faint)' }}>
          <span className="aspace-plus" />
          <span className="aspace-plus" />
          <span className="aspace-plus" />
        </div>
      </div>
    </section>
  );
}

// 3 — Big Statement
function BigStatement({ headline = 'NOT A COWORKING SPACE.\nA CREATIVE BASE.' }) {
  const t = (window.useT && window.useT()) || ((k) => k);
  const ref = useReveal(0.1);
  return (
    <section ref={ref} className="reveal section" style={{
      background: 'var(--aspace-bg)', position: 'relative',
    }}>
      <div style={{ position: 'relative', zIndex: 2 }}>
      <div className="aspace-eyebrow" style={{ marginBottom: 56 }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
          <span className="aspace-plus" /> {t('statement.eyebrow')}
        </span>
      </div>
      <h2 style={{
        margin: 0,
        fontFamily: "'Inter Tight', sans-serif",
        fontWeight: 500,
        fontSize: 'clamp(48px, 9vw, 160px)',
        lineHeight: 0.92,
        letterSpacing: '-0.03em',
        maxWidth: '14ch',
        whiteSpace: 'pre-line',
      }}>
        {headline.split('\n').map((line, i) => (
          <span key={i} style={{ display: 'block' }}>
            {i === 0 ? line : <span><span className="blue-swipe">{line}</span></span>}
          </span>
        ))}
      </h2>
      <div style={{
        marginTop: 'clamp(48px, 8vw, 120px)',
        marginLeft: 'auto',
        maxWidth: 520,
        paddingLeft: 'clamp(0px, 8vw, 80px)',
      }}>
        <p style={{
          fontSize: 'clamp(17px, 1.4vw, 22px)',
          lineHeight: 1.45,
          color: 'var(--aspace-ink)',
          fontWeight: 400,
        }}>
          {t('statement.copyLead')} <span style={{ color: 'var(--aspace-quiet)' }}>{t('statement.copyTrail')}</span>
        </p>
        <div style={{ marginTop: 32, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <a className="aspace-pill solid" href="#private-studios">{t('statement.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 ghost" href="#about">{t('statement.ctaSecondary')}</a>
        </div>
      </div>
      </div>
    </section>
  );
}

// 4 — Immersive Reel — panel grows from medium to wide as user scrolls
function ImmersiveReel() {
  const tr = (window.useT && window.useT()) || ((k) => k);
  const sectionRef = useRefSec(null);
  const panelRef = useRefSec(null);
  const [progress, setProgress] = useStateSec(0);

  useEffectSec(() => {
    if (!sectionRef.current) return;
    const onScroll = () => {
      const r = sectionRef.current.getBoundingClientRect();
      const vh = window.innerHeight;
      // progress 0 when section just entered viewport, 1 when fully scrolled past midpoint
      const total = r.height + vh;
      const seen = vh - r.top;
      const p = Math.min(1, Math.max(0, seen / total));
      setProgress(p);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // Width interpolation: 60% → 96% as p goes 0.2 → 0.8
  const t = Math.min(1, Math.max(0, (progress - 0.2) / 0.6));
  const width = 60 + t * 36;
  const radius = 28 - t * 12;
  const dim = 0.0 + t * 0.5;

  return (
    <section ref={sectionRef} style={{
      position: 'relative',
      padding: 'clamp(80px, 14vh, 200px) var(--gutter)',
      background: 'var(--aspace-bg)',
      minHeight: '120vh',
      overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', inset: 0, background: '#0A0A0B', opacity: dim,
        transition: 'opacity 200ms linear', pointerEvents: 'none',
      }} />
      <div style={{ position: 'relative', zIndex: 2, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', flexWrap: 'wrap', gap: 24 }}>
        <div className="aspace-eyebrow" style={{ color: dim > 0.3 ? 'rgba(255,255,255,0.55)' : 'var(--aspace-quiet)', transition: 'color 200ms linear' }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
            <span className="aspace-plus" /> {tr('reel.eyebrow')}
          </span>
        </div>
        <div style={{ color: dim > 0.3 ? 'rgba(255,255,255,0.7)' : 'var(--aspace-quiet)', fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', transition: 'color 200ms linear' }}>
          {tr('reel.tagline')}
        </div>
      </div>

      <div ref={panelRef} style={{
        position: 'relative', zIndex: 2,
        marginTop: 'clamp(40px, 6vw, 80px)',
        width: width + '%',
        maxWidth: '100%',
        marginLeft: 'auto', marginRight: 'auto',
        aspectRatio: '16 / 9',
        borderRadius: radius + 'px',
        overflow: 'hidden',
        boxShadow: '0 40px 100px rgba(0,0,0,0.4)',
        transition: 'box-shadow 400ms ease',
      }}>
        {/* placeholder video bg — replace src to use real video */}
        <video
          autoPlay loop muted playsInline preload="metadata"
          style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
          poster=""
        >
          {/* leave src empty so we render the placeholder image below */}
        </video>
        <div className="photo-placeholder ink" style={{ position: 'absolute', inset: 0 }}>
          <div style={{
            position: 'absolute', inset: 0,
            background: 'radial-gradient(ellipse at 70% 40%, rgba(0,194,255,0.22), transparent 60%)',
          }} />
        </div>

        {/* Play UI */}
        <div style={{
          position: 'absolute', inset: 0,
          display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
          color: '#fff', gap: 32,
        }}>
          <button data-cursor="lg" style={{
            all: 'unset', cursor: 'pointer',
            width: 'clamp(80px, 9vw, 130px)', height: 'clamp(80px, 9vw, 130px)',
            borderRadius: '50%',
            border: '1px solid rgba(255,255,255,0.6)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            transition: 'background 360ms var(--ease-cinema), border-color 360ms',
            backdropFilter: 'blur(6px)',
          }} onMouseEnter={e => { e.currentTarget.style.background = 'rgba(0,194,255,0.25)'; e.currentTarget.style.borderColor = 'var(--aspace-blue)'; }}
             onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.borderColor = 'rgba(255,255,255,0.6)'; }}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
          </button>
          <div style={{
            fontFamily: "'Inter Tight', sans-serif",
            fontWeight: 500,
            fontSize: 'clamp(48px, 7vw, 110px)',
            lineHeight: 0.95, letterSpacing: '-0.03em',
            textWrap: 'balance', textAlign: 'center',
          }}>
            {tr('reel.title')}
          </div>
          <div style={{
            display: 'flex', gap: 24,
            fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase',
            color: 'rgba(255,255,255,0.7)',
          }}>
            <span>{tr('reel.metaLocation')}</span>
            <span style={{ opacity: 0.5 }}>·</span>
            <span>{tr('reel.metaVolume')}</span>
            <span style={{ opacity: 0.5 }}>·</span>
            <span>{tr('reel.metaDuration')}</span>
          </div>
        </div>
      </div>
    </section>
  );
}

window.HeroSection = HeroSection;
window.ScrollDivider = ScrollDivider;
window.BigStatement = BigStatement;
window.ImmersiveReel = ImmersiveReel;