const { PillRow, Button, IndexTag } = window.MartiniVastgoedDesignSystem_adb8d1;

function Zakelijk() {
  const vidRef = React.useRef(null);
  const [muted, setMuted] = React.useState(true);
  React.useEffect(() => {
    const v = vidRef.current;
    if (!v) return;
    const io = new IntersectionObserver(([en]) => { en.isIntersecting ? v.play().catch(() => {}) : v.pause(); }, { threshold: 0.15 });
    io.observe(v);
    return () => io.disconnect();
  }, []);
  return (
    <section id="zakelijk" style={{ background: 'var(--mv-ink)', color: 'var(--mv-bone)', borderTop: '3px solid var(--mv-pink)', borderBottom: '3px solid var(--mv-pink)', padding: 'var(--section-y) var(--gutter)' }}>
      <div style={{ maxWidth: 'var(--maxw)', margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(min(320px,100%),1fr))', gap: 'var(--space-8)', alignItems: 'center' }}>
        <div>
          <IndexTag label="05 · Zakelijk" accent="pink" style={{ color: 'var(--mv-bone)' }} />
          <h2 style={{ margin: '18px 0 0', font: '900 var(--fs-h1)/0.96 var(--font-display)', letterSpacing: 'var(--ls-display)' }}>Ook zakelijk<span style={{ color: 'var(--mv-pink)' }}>.</span></h2>
          <p style={{ margin: '20px 0 0', maxWidth: '46ch', font: '400 var(--fs-body-lg)/var(--lh-body) var(--font-body)', color: 'var(--mv-bone-70)' }}>
            Winkelpand op de Vismarkt, horeca in de Oosterstraat of een kantoor met uitzicht op de toren. Bedrijfsruimte verhuren en verkopen we ook, al sinds 1992.
          </p>
          <div style={{ marginTop: 22 }}><PillRow items={['Winkel', 'Horeca', 'Kantoor', 'Belegging']} color="bone" /></div>
          <div style={{ marginTop: 26 }}><Button variant="pink" size="lg" iconRight={<span aria-hidden="true">→</span>}>Bekijk zakelijk aanbod</Button></div>
        </div>
        <div className="mvp-zak-frame" style={{ position: 'relative', border: '3px solid var(--mv-pink)', boxShadow: '10px 10px 0 var(--mv-pink)', background: 'var(--mv-ink)', aspectRatio: '16/10', overflow: 'visible', transition: 'transform .18s, box-shadow .18s' }}>
          <video ref={vidRef} src="assets/video-zakelijk-web.mp4" muted={muted} loop playsInline preload="metadata" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }}></video>
          <button onClick={() => { setMuted(!muted); const v = vidRef.current; if (v && muted) v.play().catch(() => {}); }} aria-label={muted ? 'Geluid aan' : 'Geluid uit'}
            style={{ position: 'absolute', bottom: 14, right: 14, cursor: 'pointer', background: 'var(--mv-bone)', color: 'var(--mv-ink)', border: '3px solid var(--mv-ink)', boxShadow: '4px 4px 0 var(--mv-ink)', minHeight: 46, padding: '8px 12px', font: '700 var(--fs-label-sm)/1 var(--font-mono)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>
            {muted ? '► Geluid aan' : '◼ Geluid uit'}
          </button>
          <span style={{ position: 'absolute', top: -16, right: 22, background: 'var(--mv-green)', color: 'var(--mv-ink)', border: '3px solid var(--mv-ink)', boxShadow: '4px 4px 0 var(--mv-ink)', padding: '8px 12px', font: '700 var(--fs-label-sm)/1 var(--font-mono)', letterSpacing: '0.08em', textTransform: 'uppercase', transform: 'rotate(4deg)' }}>Te huur ✳</span>
        </div>
      </div>
      <style>{`.mvp-zak-frame:hover{transform:translate(-3px,-3px);box-shadow:13px 13px 0 var(--mv-pink)}`}</style>
    </section>
  );
}
Object.assign(window, { Zakelijk });