/* global React */
const { useEffect: useEffectMenu, useState: useStateMenu, useRef: useRefMenu } = React;

function ASpaceLogo({ on = "dark" }) {
  // Wordmark image logo, used as the single brand mark across the site.
  // on="dark" → dark text on light, on="light" → white text on dark.
  // Source is white-on-transparent; invert for light backgrounds.
  const t = (window.useT && window.useT()) || ((k) => k);
  const color = on === "dark" ? "#0A0A0B" : "#fff";
  const isDarkText = on === "dark";
  return (
    <a href="/site/homepage.html" aria-label={t('header.logoAria')} style={{ display: 'inline-flex', alignItems: 'center', lineHeight: 1, color }}>
      <img
        src="/site/assets/aspace-logo-white.png"
        alt="ASPACE"
        style={{
          height: 40,
          width: 'auto',
          maxWidth: 'none',
          display: 'block',
          filter: isDarkText ? 'invert(1)' : 'none',
        }}
      />
    </a>
  );
}

/* ----------------------------------------------------------------- */
/*  Header controls — shared Apple-glass system                       */
/*  All three controls (Search · Let's talk · Menu) use the same      */
/*  glass tokens below. Calm hover (brightness + 1-2px lift), no      */
/*  orbits/pulses/neon. Material quality over animation.              */
/* ----------------------------------------------------------------- */
const GLASS_BG       = 'linear-gradient(180deg, rgba(20,22,28,0.55) 0%, rgba(10,10,11,0.42) 100%)';
const GLASS_BG_HOVER = 'linear-gradient(180deg, rgba(28,30,38,0.62) 0%, rgba(14,14,16,0.50) 100%)';
const GLASS_BORDER   = '1px solid rgba(255,255,255,0.14)';
const GLASS_BORDER_H = '1px solid rgba(255,255,255,0.22)';
const GLASS_SHADOW = `
  0 1px 0 rgba(255,255,255,0.12) inset,
  0 -1px 0 rgba(0,0,0,0.35) inset,
  0 12px 28px -16px rgba(0,0,0,0.45),
  0 0 36px rgba(0,194,255,0.06)
`;
const GLASS_SHADOW_H = `
  0 1px 0 rgba(255,255,255,0.16) inset,
  0 -1px 0 rgba(0,0,0,0.40) inset,
  0 18px 42px -20px rgba(0,0,0,0.55),
  0 0 56px rgba(0,194,255,0.10)
`;
const GLASS_TRANSITION = 'transform 420ms cubic-bezier(0.22,1,0.36,1), background 320ms ease, border-color 320ms ease, box-shadow 420ms ease';

function MenuTrigger({ onClick, compact = false }) {
  const t = (window.useT && window.useT()) || ((k) => k);
  const [hover, setHover] = useStateMenu(false);

  return (
    <button
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      aria-label={t('header.menuOpen')}
      style={{
        all: 'unset', cursor: 'pointer',
        position: 'relative',
        display: 'inline-flex', alignItems: 'center',
        gap: compact ? 0 : 12,
        padding: compact ? '0 14px 0 18px' : '0 18px 0 22px',
        height: 44,
        borderRadius: 999,
        background: hover ? GLASS_BG_HOVER : GLASS_BG,
        backdropFilter: 'blur(18px) saturate(140%)',
        WebkitBackdropFilter: 'blur(18px) saturate(140%)',
        border: hover ? GLASS_BORDER_H : GLASS_BORDER,
        color: '#fff',
        fontFamily: "'Inter Tight', sans-serif",
        fontSize: 11, fontWeight: 500, letterSpacing: '0.20em', textTransform: 'uppercase',
        transform: hover ? 'translateY(-1px)' : 'translateY(0)',
        transition: GLASS_TRANSITION,
        boxShadow: hover ? GLASS_SHADOW_H : GLASS_SHADOW,
      }}
    >
      {!compact && <span style={{ opacity: hover ? 1 : 0.86, transition: 'opacity 320ms ease' }}>{t('header.menuLabel')}</span>}
      <span aria-hidden="true" style={{
        position: 'relative',
        display: 'inline-flex', flexDirection: 'column',
        width: 16, height: 14, justifyContent: 'center',
        gap: 4,
      }}>
        <span style={{
          height: 1.2, background: 'currentColor',
          width: hover ? '100%' : '70%',
          alignSelf: 'flex-end',
          transition: 'width 480ms cubic-bezier(0.22,1,0.36,1)',
        }}/>
        <span style={{
          height: 1.2, background: 'currentColor',
          width: hover ? '70%' : '100%',
          transition: 'width 480ms cubic-bezier(0.22,1,0.36,1) 60ms',
        }}/>
      </span>
    </button>
  );
}

/* ----------------------------------------------------------------- */
/*  LetsTalk — primary CTA                                            */
/*  Same calm glass system as Menu/Search. The arrow disc is now a    */
/*  layered glass circle (no orbit, no pulse, no rotation). Material  */
/*  quality replaces motion theatrics.                                */
/* ----------------------------------------------------------------- */
function LetsTalk() {
  const t = (window.useT && window.useT()) || ((k) => k);
  const [hover, setHover] = useStateMenu(false);

  return (
    <a
      href="#contact"
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        position: 'relative',
        display: 'inline-flex', alignItems: 'center',
        gap: 14,
        height: 50,
        padding: '0 8px 0 24px',
        borderRadius: 999,
        background: hover ? GLASS_BG_HOVER : GLASS_BG,
        backdropFilter: 'blur(18px) saturate(140%)',
        WebkitBackdropFilter: 'blur(18px) saturate(140%)',
        border: hover ? GLASS_BORDER_H : GLASS_BORDER,
        color: '#fff',
        textDecoration: 'none',
        fontFamily: "'Inter Tight', sans-serif",
        fontSize: 14, fontWeight: 500, letterSpacing: '-0.005em',
        transform: hover ? 'translateY(-2px)' : 'translateY(0)',
        transition: GLASS_TRANSITION,
        boxShadow: hover ? GLASS_SHADOW_H : GLASS_SHADOW,
        WebkitTapHighlightColor: 'transparent',
      }}
    >
      {/* Top edge specular highlight — material detail only */}
      <span aria-hidden="true" style={{
        position: 'absolute', top: 0, left: '14%', right: '14%',
        height: 1,
        background: 'linear-gradient(to right, transparent, rgba(255,255,255,0.40), transparent)',
        opacity: hover ? 0.85 : 0.55,
        pointerEvents: 'none',
        transition: 'opacity 420ms ease',
      }}/>
      {/* Reflection sweep — slowly drifts on hover only */}
      <span aria-hidden="true" style={{
        position: 'absolute', inset: 0, borderRadius: 999,
        background: 'linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.06) 50%, transparent 65%)',
        opacity: hover ? 1 : 0,
        transform: hover ? 'translateX(8%)' : 'translateX(-12%)',
        transition: 'opacity 520ms ease, transform 1200ms cubic-bezier(0.22,1,0.36,1)',
        pointerEvents: 'none',
        mixBlendMode: 'screen',
      }}/>
      {/* Soft ambient blue diffusion — barely there */}
      <span aria-hidden="true" style={{
        position: 'absolute', inset: 0, borderRadius: 999,
        background: 'radial-gradient(140px 60px at 78% 60%, rgba(0,194,255,0.10) 0%, transparent 70%)',
        opacity: hover ? 1 : 0.55,
        transition: 'opacity 480ms ease',
        pointerEvents: 'none',
      }}/>

      <span style={{ position: 'relative', zIndex: 1 }}>{t('header.letsTalk')}</span>

      {/* Arrow disc — layered translucent glass. NO orbit. NO pulse. */}
      <span aria-hidden="true" style={{
        position: 'relative', zIndex: 1,
        flexShrink: 0,
        width: 36, height: 36,
        borderRadius: '50%',
        background: 'radial-gradient(circle at 32% 28%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.06) 45%, rgba(255,255,255,0.02) 100%)',
        border: '1px solid rgba(255,255,255,0.16)',
        boxShadow: `
          inset 0 1px 0 rgba(255,255,255,0.22),
          inset 0 -1px 0 rgba(0,0,0,0.20),
          0 4px 10px -6px rgba(0,0,0,0.4)
        `,
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        overflow: 'hidden',
        transform: hover ? 'scale(1.04)' : 'scale(1)',
        transition: 'transform 480ms cubic-bezier(0.22,1,0.36,1)',
      }}>
        {/* Tiny internal reflection — top-left highlight */}
        <span style={{
          position: 'absolute', top: 4, left: 5,
          width: 12, height: 6,
          borderRadius: '50%',
          background: 'rgba(255,255,255,0.18)',
          filter: 'blur(2px)',
          pointerEvents: 'none',
        }}/>
        {/* Faint blue tint — minimal hint of brand color */}
        <span style={{
          position: 'absolute', inset: 0,
          borderRadius: '50%',
          background: 'radial-gradient(circle at 60% 60%, rgba(0,194,255,0.15) 0%, transparent 60%)',
          opacity: hover ? 0.9 : 0.55,
          transition: 'opacity 480ms ease',
        }}/>
        {/* Arrow — clean, no rotation, just a gentle 1px nudge */}
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" style={{
          position: 'relative', zIndex: 1,
          transform: hover ? 'translateX(1px)' : 'translateX(0)',
          transition: 'transform 480ms cubic-bezier(0.22,1,0.36,1)',
        }}>
          <path d="M5 12h14M13 6l6 6-6 6"/>
        </svg>
      </span>
    </a>
  );
}

function SiteHeader({ onOpenMenu, onOpenSearch, dark = false }) {
  const t = (window.useT && window.useT()) || ((k) => k);
  const [scrolled, setScrolled] = useStateMenu(false);
  useEffectMenu(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const inkColor = dark ? '#fff' : '#0A0A0B';
  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 9000,
      padding: 'clamp(16px, 1.6vw, 22px) clamp(20px, 5vw, 80px)',
      display: 'flex', alignItems: 'center',
      gap: 'clamp(16px, 2vw, 28px)',
      // floating treatment — only soft veil when scrolled, no hard background
      background: scrolled
        ? (dark
            ? 'linear-gradient(to bottom, rgba(10,10,11,0.45) 0%, rgba(10,10,11,0.0) 100%)'
            : 'linear-gradient(to bottom, rgba(244,242,236,0.55) 0%, rgba(244,242,236,0.0) 100%)')
        : 'transparent',
      backdropFilter: scrolled ? 'blur(14px) saturate(140%)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(14px) saturate(140%)' : 'none',
      transition: 'background 480ms cubic-bezier(0.22,1,0.36,1), backdrop-filter 480ms ease',
      color: inkColor,
    }}>
      <ASpaceLogo on={dark ? 'light' : 'dark'} />

      {/* Desktop control cluster — generous gap between primitives */}
      <div className="desktop-only" style={{
        marginLeft: 'auto',
        display: 'inline-flex', alignItems: 'center',
        gap: 'clamp(12px, 1.6vw, 22px)',
      }}>
        {window.SearchTrigger
          ? <window.SearchTrigger onClick={onOpenSearch} dark={dark} />
          : (
            <button className={"aspace-icon-btn" + (dark ? " on-dark" : "")} aria-label={t('header.searchLabel')} onClick={onOpenSearch}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
                <circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/>
              </svg>
            </button>
          )
        }
        <LetsTalk/>
        <MenuTrigger onClick={onOpenMenu} dark={dark}/>
      </div>

      {/* Mobile control cluster — search icon + menu capsule (no Let's Talk) */}
      <div className="mobile-only" style={{
        marginLeft: 'auto',
        display: 'inline-flex', alignItems: 'center', gap: 10,
      }}>
        {window.SearchTrigger
          ? <window.SearchTrigger onClick={onOpenSearch} dark={dark} />
          : (
            <button className={"aspace-icon-btn" + (dark ? " on-dark" : "")} aria-label={t('header.searchLabel')} onClick={onOpenSearch}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
                <circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/>
              </svg>
            </button>
          )
        }
        <MenuTrigger onClick={onOpenMenu} dark={dark} compact />
      </div>
    </header>
  );
}

function SiteMenu({ open, onClose }) {
  const t = (window.useT && window.useT()) || ((k) => k);
  const [hoverIdx, setHoverIdx] = useStateMenu(-1);
  useEffectMenu(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    // Lock both html and body — the browser scrollbar lives on html.
    document.documentElement.style.overflow = 'hidden';
    document.body.style.overflow = 'hidden';
    if (window.lenis && typeof window.lenis.stop === 'function') window.lenis.stop();
    return () => {
      window.removeEventListener('keydown', onKey);
      // Always reset (never restore stale 'hidden' from chained overlays).
      document.documentElement.style.overflow = '';
      document.body.style.overflow = '';
      if (window.lenis && typeof window.lenis.start === 'function') window.lenis.start();
    };
  }, [open, onClose]);
  useEffectMenu(() => { if (!open) setHoverIdx(-1); }, [open]);

  const HREFS = ['/site/homepage.html', '/site/studios.html', '/site/about.html', '/site/journal.html', '#contact'];
  const items = (t('menu.items') || []).map((it, i) => ({ ...it, href: HREFS[i] }));

  return (
    <React.Fragment>
      {/* Backdrop */}
      <div
        onClick={onClose}
        style={{
          position: 'fixed', inset: 0, zIndex: 9500,
          background: 'rgba(10,10,11,0.55)',
          backdropFilter: 'blur(8px)',
          WebkitBackdropFilter: 'blur(8px)',
          opacity: open ? 1 : 0,
          pointerEvents: open ? 'auto' : 'none',
          transition: 'opacity 480ms var(--ease-cinema)',
        }}
      />
      {/* Panel */}
      <div
        style={{
          position: 'fixed',
          top: 14, left: 14, right: 14, zIndex: 9600,
          background: '#F4F2EC',
          borderRadius: 28,
          padding: 'clamp(24px, 4vw, 48px)',
          maxHeight: 'calc(100vh - 28px)',
          overflow: 'auto',
          transform: open ? 'translateY(0)' : 'translateY(-110%)',
          transition: 'transform 720ms var(--ease-cinema)',
          boxShadow: '0 30px 80px rgba(0,0,0,0.25)',
        }}
        aria-hidden={!open}
      >
        {/* Header row */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          <ASpaceLogo on="dark" />
          <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 12 }}>
            {window.LangSwitcher && <window.LangSwitcher variant="header" />}
          <button onClick={onClose} className="aspace-pill ghost">
            <span>{t('menu.close')}</span>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
              <path d="M6 6l12 12M18 6L6 18"/>
            </svg>
          </button>
          </div>
        </div>

        {/* Body */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 2fr) minmax(280px, 1fr)',
          gap: 'clamp(24px, 4vw, 56px)',
          marginTop: 'clamp(28px, 5vw, 56px)',
        }} className="menu-grid">
          <nav>
            <div className="aspace-eyebrow" style={{ marginBottom: 24 }}>{t('menu.navEyebrow')}</div>
            <ul
              onMouseLeave={() => setHoverIdx(-1)}
              style={{ listStyle: 'none', padding: 0, margin: 0, position: 'relative' }}
            >
              {/* Sliding pill — animated background that follows hover */}
              <div
                aria-hidden="true"
                style={{
                  position: 'absolute',
                  left: -16, right: -16,
                  top: 0,
                  height: `calc(100% / ${items.length})`,
                  borderRadius: 18,
                  background: '#0A0A0B',
                  transform: `translateY(${hoverIdx * 100}%) scaleY(${hoverIdx >= 0 ? 1 : 0.92})`,
                  opacity: hoverIdx >= 0 ? 1 : 0,
                  transition: 'transform 620ms cubic-bezier(0.22, 1.2, 0.36, 1), opacity 360ms ease',
                  pointerEvents: 'none',
                  zIndex: 0,
                  boxShadow: '0 18px 50px rgba(0,194,255,0.12), inset 0 0 0 1px rgba(255,255,255,0.04)',
                }}
              />
              {items.map((item, i) => {
                const active = hoverIdx === i;
                const dim = hoverIdx >= 0 && !active;
                return (
                <li key={item.label} style={{
                  borderTop: i === 0 ? '1px solid rgba(0,0,0,0.12)' : '1px solid transparent',
                  position: 'relative',
                  zIndex: 1,
                }}>
                  <a href={item.href} onClick={onClose}
                    onMouseEnter={() => setHoverIdx(i)}
                    onFocus={() => setHoverIdx(i)}
                    style={{
                      display: 'flex', alignItems: 'center', gap: 18,
                      padding: 'clamp(14px, 2.4vw, 28px) 0',
                      color: active ? '#fff' : '#0A0A0B',
                      transitionDelay: open ? `${100 + i * 70}ms, 0ms, 0ms` : '0ms',
                      transform: open ? 'translateY(0)' : 'translateY(40px)',
                      opacity: open ? (dim ? 0.35 : 1) : 0,
                      transition: 'transform 800ms var(--ease-cinema), opacity 360ms ease, color 320ms ease',
                      perspective: 800,
                    }}
                  >
                    <span style={{
                      fontSize: 12, letterSpacing: '0.12em',
                      color: active ? 'var(--aspace-blue)' : 'rgba(0,0,0,0.4)',
                      minWidth: 32,
                      transition: 'color 320ms ease, transform 520ms cubic-bezier(0.22,1.2,0.36,1)',
                      transform: active ? 'translateX(8px)' : 'translateX(0)',
                    }}>{item.n}</span>
                    <span style={{
                      display: 'inline-block',
                      fontFamily: "'Inter Tight', sans-serif",
                      fontWeight: 500,
                      fontSize: 'clamp(48px, 7vw, 96px)',
                      lineHeight: 0.95,
                      letterSpacing: '-0.02em',
                      transformStyle: 'preserve-3d',
                      transform: active
                        ? 'translateX(14px) rotateX(-2deg) rotateY(-1.5deg) translateZ(8px)'
                        : 'translateX(0) rotateX(0) rotateY(0) translateZ(0)',
                      transition: 'transform 620ms cubic-bezier(0.22,1.2,0.36,1)',
                    }}>{(item.label || '').toUpperCase()}</span>
                    <span style={{
                      marginLeft: 'auto',
                      width: 56, height: 56, borderRadius: '50%',
                      border: '1px solid ' + (active ? 'var(--aspace-blue)' : 'rgba(0,0,0,0.18)'),
                      background: active ? 'var(--aspace-blue)' : 'transparent',
                      color: active ? '#000' : '#0A0A0B',
                      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                      transform: active ? 'translateX(0) scale(1)' : 'translateX(-12px) scale(0.85)',
                      opacity: active ? 1 : 0.4,
                      transition: 'transform 620ms cubic-bezier(0.22,1.2,0.36,1), opacity 320ms ease, background 320ms ease, border-color 320ms ease, color 320ms ease',
                      flexShrink: 0,
                      overflow: 'hidden',
                    }}>
                      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" style={{
                        transform: active ? 'translate(0,0)' : 'translate(-4px,4px)',
                        transition: 'transform 520ms cubic-bezier(0.22,1.2,0.36,1) 60ms',
                      }}><path d="M7 17L17 7M9 7h8v8"/></svg>
                    </span>
                  </a>
                </li>
                );
              })}
              <li style={{ borderTop: '1px solid rgba(0,0,0,0.12)' }} />
            </ul>
          </nav>

          <aside style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div style={{
              background: '#0A0A0B', color: '#fff', borderRadius: 20, padding: 28,
              transform: open ? 'translateY(0)' : 'translateY(40px)',
              opacity: open ? 1 : 0,
              transition: 'transform 800ms var(--ease-cinema) 200ms, opacity 600ms var(--ease-cinema) 200ms',
            }}>
              <div className="aspace-eyebrow" style={{ color: 'rgba(255,255,255,0.55)', marginBottom: 12 }}>{t('menu.newsletter.eyebrow')}</div>
              <h3 style={{ fontSize: 24, fontWeight: 500, lineHeight: 1.1, margin: 0, marginBottom: 16, letterSpacing: '-0.01em' }}>
                {t('menu.newsletter.headline')}
              </h3>
              <form onSubmit={(e) => e.preventDefault()} style={{ display: 'flex', gap: 8 }}>
                <input type="email" placeholder={t('menu.newsletter.placeholder')}
                  style={{
                    flex: 1, padding: '14px 16px', borderRadius: 99,
                    background: 'rgba(255,255,255,0.06)',
                    border: '1px solid rgba(255,255,255,0.16)',
                    color: '#fff', fontSize: 14, outline: 'none', fontFamily: 'inherit'
                  }}
                />
                <button type="submit" className="aspace-pill on-dark solid">{t('menu.newsletter.submit')}</button>
              </form>
            </div>
            <div style={{
              position: 'relative',
              background: '#fff', borderRadius: 20,
              padding: 'clamp(28px, 2.2vw, 34px)',
              border: '1px solid rgba(10,10,11,0.08)',
              overflow: 'hidden',
              transform: open ? 'translateY(0)' : 'translateY(40px)',
              opacity: open ? 1 : 0,
              transition: 'transform 800ms var(--ease-cinema) 280ms, opacity 600ms var(--ease-cinema) 280ms',
            }}>
              {/* ambient electric-blue light pool, top-right */}
              <span aria-hidden="true" style={{
                position: 'absolute', top: -60, right: -60,
                width: 200, height: 200, borderRadius: '50%',
                background: 'radial-gradient(circle, rgba(0,194,255,0.18) 0%, transparent 70%)',
                filter: 'blur(6px)',
                pointerEvents: 'none',
              }}/>
              {/* atmospheric grid texture, bottom — barely there */}
              <svg aria-hidden="true" viewBox="0 0 200 80" preserveAspectRatio="none" style={{
                position: 'absolute', left: 0, right: 0, bottom: 0,
                width: '100%', height: 80, opacity: 0.06, pointerEvents: 'none',
              }}>
                <defs>
                  <pattern id="visit-grid" width="20" height="20" patternUnits="userSpaceOnUse">
                    <path d="M 20 0 L 0 0 0 20" stroke="#0A0A0B" strokeWidth="0.5" fill="none"/>
                  </pattern>
                </defs>
                <rect width="200" height="80" fill="url(#visit-grid)"/>
              </svg>

              {/* eyebrow row with accent dot — airy + spacious */}
              <div style={{
                display: 'flex', alignItems: 'center', gap: 10,
                marginBottom: 22,
              }}>
                <span aria-hidden="true" style={{
                  width: 5, height: 5, borderRadius: '50%',
                  background: 'var(--aspace-blue)',
                  boxShadow: '0 0 10px var(--aspace-blue)',
                }}/>
                <span className="aspace-eyebrow">{t('menu.visit.eyebrow')}</span>
              </div>

              {/* address — architectural, grounded */}
              <p style={{
                position: 'relative',
                margin: 0,
                color: '#0A0A0B',
                fontFamily: "'Inter Tight', sans-serif",
                fontWeight: 500,
                fontSize: 17,
                lineHeight: 1.22,
                letterSpacing: '-0.014em',
              }}>
                Joop Geesinkweg 306<br/>
                <span style={{ color: 'rgba(10,10,11,0.55)' }}>1114&nbsp;AB&nbsp;</span>Amsterdam-Duivendrecht
              </p>

              {/* spatial divider with micro-detail coordinates */}
              <div style={{
                position: 'relative',
                display: 'flex', alignItems: 'center', gap: 12,
                margin: '20px 0 22px',
              }}>
                <span aria-hidden="true" style={{
                  flex: 1, height: 1,
                  background: 'linear-gradient(to right, rgba(10,10,11,0.18) 0%, rgba(10,10,11,0.04) 100%)',
                }}/>
                <span style={{
                  fontFamily: "'Inter Tight', sans-serif",
                  fontSize: 9.5, letterSpacing: '0.22em', textTransform: 'uppercase',
                  color: 'rgba(10,10,11,0.42)',
                  fontVariantNumeric: 'tabular-nums',
                }}>52.31°N · 4.93°E</span>
              </div>

              <a href="#contact" className="aspace-pill solid" onClick={onClose} style={{ position: 'relative' }}>
                {t('menu.visit.cta')}
                <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>
            </div>
          </aside>
        </div>

        <style>{`
          @media (max-width: 800px) {
            .menu-grid { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </div>
    </React.Fragment>
  );
}

window.SiteHeader = SiteHeader;
window.SiteMenu = SiteMenu;
window.ASpaceLogo = ASpaceLogo;