function Loader({ onDone }) {
  const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  const [pct, setPct] = React.useState(0);
  const [exit, setExit] = React.useState(false);
  const [gone, setGone] = React.useState(reduced);
  React.useEffect(() => {
    if (reduced) { onDone && onDone(); return; }
    document.body.classList.add('mvp-loading');
    const t0 = performance.now(), dur = 1600;
    let raf;
    const tick = (t) => {
      const p = Math.min(1, (t - t0) / dur);
      setPct((1 - Math.pow(1 - p, 3)) * 100);
      if (p < 1) raf = requestAnimationFrame(tick);
      else {
        setExit(true);
        document.body.classList.remove('mvp-loading');
        setTimeout(() => { setGone(true); onDone && onDone(); }, 720);
      }
    };
    raf = requestAnimationFrame(tick);
    return () => { cancelAnimationFrame(raf); document.body.classList.remove('mvp-loading'); };
  }, []);
  if (gone) return null;
  const meters = ((pct / 100) * 96.8).toFixed(1).replace('.', ',');
  const label = { font: '700 var(--fs-label)/1 var(--font-mono)', letterSpacing: 'var(--ls-label)', textTransform: 'uppercase' };
  return (
    <div aria-hidden="true" style={{ position: 'fixed', inset: 0, zIndex: 100, pointerEvents: exit ? 'none' : 'auto' }}>
      <div style={{ position: 'absolute', inset: 0, background: 'var(--mv-green)', borderBottom: '3px solid var(--mv-ink)', transform: exit ? 'translateY(-101%)' : 'none', transition: 'transform .5s cubic-bezier(.7,0,.2,1) .13s' }}></div>
      <div style={{ position: 'absolute', inset: 0, background: 'var(--mv-bone)', color: 'var(--mv-ink)', borderBottom: '3px solid var(--mv-ink)', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', padding: 'clamp(1.25rem,3.5vw,2.5rem)', transform: exit ? 'translateY(-101%)' : 'none', transition: 'transform .5s cubic-bezier(.7,0,.2,1)' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', ...label }}>
          <span>Martini Vastgoed<span style={{ color: 'var(--mv-pink)' }}> · Groningen van boven</span></span>
          <span className="mvl-spin" style={{ display: 'inline-block', font: '900 1.6rem/1 var(--font-display)', color: 'var(--mv-green)', textShadow: '2px 2px 0 var(--mv-ink)' }}>✳</span>
        </div>
        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'flex-end', gap: 'clamp(1.5rem,4vw,3.5rem)' }}>
          <div style={{ position: 'relative', height: 'clamp(200px,38vh,400px)' }}>
            <img src="assets/tower-upright.webp" alt="" style={{ display: 'block', height: '100%', width: 'auto', opacity: 0.16 }} />
            <img src="assets/tower-upright.webp" alt="" style={{ position: 'absolute', inset: 0, height: '100%', width: 'auto', clipPath: `inset(${100 - pct}% 0 0 0)`, filter: 'drop-shadow(8px 10px 0 var(--mv-green))' }} />
          </div>
          <div style={{ paddingBottom: '0.4rem' }}>
            <div style={{ ...label, color: 'var(--mv-ink-70)', marginBottom: 10 }}>Martinitoren</div>
            <div style={{ font: '900 clamp(2.6rem,7vw,5.5rem)/0.9 var(--font-display)', letterSpacing: 'var(--ls-display)', fontVariantNumeric: 'tabular-nums' }}>{meters}<span style={{ color: 'var(--mv-green)', textShadow: '2px 2px 0 var(--mv-ink)' }}> m</span></div>
          </div>
        </div>
        <div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 10, ...label }}>
            <span style={{ color: 'var(--mv-ink-70)' }}>Laden</span>
            <span>{Math.round(pct)}%</span>
          </div>
          <div style={{ height: 10, border: '2px solid var(--mv-ink)', background: 'transparent' }}>
            <div style={{ height: '100%', width: `${pct}%`, background: 'var(--mv-green)', borderRight: pct > 1 && pct < 99.5 ? '2px solid var(--mv-ink)' : 'none' }}></div>
          </div>
        </div>
      </div>
      <style>{`
        .mvl-spin{animation:mvlSpin 2.2s linear infinite;transform-origin:50% 52%}
        @keyframes mvlSpin{to{transform:rotate(360deg)}}
      `}</style>
    </div>
  );
}
Object.assign(window, { Loader });