const { SectionHeading, Button } = window.MartiniVastgoedDesignSystem_adb8d1;

function PlaceholderStripes({ label, img }) {
  return (
    <div style={{ position: 'relative', height: 190, borderBottom: '3px solid var(--mv-ink)', background: 'repeating-linear-gradient(45deg,var(--mv-bone-2) 0 12px,var(--mv-bone) 12px 24px)', display: 'grid', placeItems: 'center', overflow: 'hidden' }}>
      <span style={{ font: '700 var(--fs-label-sm)/1.4 var(--font-mono)', letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--mv-ink-70)', background: 'var(--mv-bone)', border: '2px solid var(--mv-ink)', padding: '6px 10px' }}>{label}</span>
      {img && <img src={img} alt={label} onError={(e) => { e.currentTarget.style.display = 'none'; }} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />}
    </div>
  );
}

function BuurtCard({ b, i }) {
  const [hover, setHover] = React.useState(false);
  return (
    <article onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ flex: '0 0 auto', scrollSnapAlign: 'center', width: 'min(380px,82vw)', background: 'var(--mv-bone)', border: '3px solid var(--mv-ink)', boxShadow: hover ? '10px 10px 0 ' + b.c : '6px 6px 0 var(--mv-ink)', transform: hover ? 'translate(-3px,-3px) rotate(-0.5deg)' : 'rotate(' + (i % 2 ? 0.6 : -0.6) + 'deg)', transition: 'transform .18s, box-shadow .18s' }}>
      <PlaceholderStripes label={'foto: ' + b.name} img={b.img} />
      <div style={{ padding: 'var(--space-5)' }}>
        <p style={{ margin: 0, font: '700 var(--fs-label-sm)/1 var(--font-mono)', letterSpacing: 'var(--ls-label)', textTransform: 'uppercase', color: 'var(--mv-ink-70)' }}>{String(i + 1).padStart(2, '0')} · {b.count} woningen</p>
        <h3 style={{ margin: '10px 0 0', font: '900 var(--fs-h3)/1 var(--font-display)', letterSpacing: 'var(--ls-heading)', color: 'var(--mv-ink)' }}>{b.name}</h3>
        <p style={{ margin: '10px 0 0', font: '400 var(--fs-body-sm)/1.5 var(--font-body)', color: 'var(--mv-ink-70)' }}>{b.desc}</p>
        <p style={{ margin: '14px 0 0', font: '700 var(--fs-body)/1 var(--font-mono)', color: 'var(--mv-ink)' }}>v.a. <span style={{ background: b.c, padding: '0 0.15em' }}>{b.from}</span> p/m</p>
      </div>
    </article>
  );
}

function Buurten() {
  const secRef = React.useRef(null);
  const trackRef = React.useRef(null);
  const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  const [narrow, setNarrow] = React.useState(window.matchMedia('(max-width:760px)').matches);
  React.useEffect(() => {
    const mq = window.matchMedia('(max-width:760px)');
    const on = () => setNarrow(mq.matches);
    mq.addEventListener('change', on);
    return () => mq.removeEventListener('change', on);
  }, []);
  const reduced = reducedMotion || narrow;
  const buurten = [
    { name: 'Binnenstad', desc: 'Boven de winkels, midden in alles.', from: '€ 895', count: 14, c: 'var(--mv-green)', img: 'assets/buurt-binnenstad.webp' },
    { name: 'Noorderplantsoen', desc: 'Park als voortuin, festival als buurman.', from: '€ 780', count: 8, c: 'var(--mv-pink)', img: 'assets/buurt-noorderplantsoen.webp' },
    { name: 'Oosterpoort', desc: 'Karakter, kroegen en de Euroborg om de hoek.', from: '€ 740', count: 11, c: 'var(--mv-tangerine)', img: 'assets/buurt-oosterpoort.webp' },
    { name: 'Korrewegwijk', desc: 'Studentikoos, betaalbaar, bruisend.', from: '€ 640', count: 17, c: 'var(--mv-green)', img: 'assets/buurt-korrewegwijk.webp' },
    { name: 'Helpman', desc: 'Ruim en groen, tien minuten fietsen.', from: '€ 1.150', count: 6, c: 'var(--mv-pink)', img: 'assets/buurt-helpman.webp' },
    { name: 'Zernike', desc: 'Op rolafstand van de campus.', from: '€ 620', count: 9, c: 'var(--mv-tangerine)', img: 'assets/buurt-zernike.webp' },
  ];
  React.useEffect(() => {
    if (reduced) { const sec = secRef.current, track = trackRef.current; if (sec) sec.style.height = 'auto'; if (track) track.style.transform = 'none'; return; }
    // motion.js heeft deze rig overgenomen, zie MOTION-PLAN.md sectie 2.
    if (window.MV_TAKEOVER) return;
    let raf = 0;
    const size = () => {
      const sec = secRef.current, track = trackRef.current;
      if (!sec || !track) return;
      if (reduced) { sec.style.height = 'auto'; return; }
      const max = Math.max(0, track.scrollWidth - track.parentElement.clientWidth);
      sec.style.height = `${window.innerHeight + max}px`;
    };
    const tick = () => {
      raf = 0;
      const sec = secRef.current, track = trackRef.current;
      if (!sec || !track) return;
      const vh = window.innerHeight;
      const p = Math.min(1, Math.max(0, (window.scrollY - sec.offsetTop) / (sec.offsetHeight - vh)));
      const max = Math.max(0, track.scrollWidth - track.parentElement.clientWidth);
      track.style.transform = `translateX(${-p * max}px)`;
    };
    const onScroll = () => { if (!raf) raf = requestAnimationFrame(tick); };
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', size);
    window.addEventListener('resize', onScroll);
    size();
    tick();
    return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', size); window.removeEventListener('resize', onScroll); if (raf) cancelAnimationFrame(raf); };
  }, [reduced]);
  return (
    <section id="buurten" ref={secRef} data-pin style={{ position: 'relative', height: reduced ? 'auto' : '260vh', background: 'var(--mv-bone)', borderBottom: '3px solid var(--mv-ink)' }}>
      <div style={{ position: reduced ? 'relative' : 'sticky', top: 0, minHeight: '100vh', display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 'var(--space-7)', overflow: 'hidden', padding: 'clamp(2.5rem,6vh,4rem) 0' }}>
        <div style={{ width: '100%', maxWidth: 'var(--maxw)', margin: '0 auto', padding: '0 var(--gutter)', display: 'flex', flexWrap: 'wrap', gap: 'var(--space-5)', alignItems: 'flex-end', justifyContent: 'space-between' }}>
          <SectionHeading num={4} total={5} label="Buurten" title="Kies je stukje Groningen." accent="tangerine" />
          <p style={{ margin: 0, font: '700 var(--fs-label)/1.4 var(--font-mono)', letterSpacing: 'var(--ls-label)', textTransform: 'uppercase', color: 'var(--mv-ink-70)' }}>{narrow ? 'Swipe → de stad schuift mee' : 'Scroll → de stad schuift mee'}</p>
        </div>
        <div className="mvp-buurt-rail" style={{ overflowX: reduced ? 'auto' : 'hidden', overflowY: 'hidden', scrollSnapType: reduced ? 'x mandatory' : 'none', WebkitOverflowScrolling: 'touch' }}>
          <div ref={trackRef} style={{ display: 'flex', gap: reduced ? 'var(--space-5)' : 'var(--space-6)', padding: '14px var(--gutter) 20px', willChange: 'transform' }}>
            {buurten.map((b, i) => <BuurtCard key={b.name} b={b} i={i} />)}
            <div style={{ flex: '0 0 auto', scrollSnapAlign: 'center', width: 'min(380px,82vw)', display: 'grid', placeItems: 'center', background: 'var(--mv-ink)', border: '3px solid var(--mv-ink)', boxShadow: '6px 6px 0 var(--mv-green)', padding: 'var(--space-6)' }}>
              <div style={{ textAlign: 'center', display: 'flex', flexDirection: 'column', gap: 18, alignItems: 'center' }}>
                <p style={{ margin: 0, font: '900 var(--fs-h3)/1.05 var(--font-display)', color: 'var(--mv-bone)' }}>Jouw buurt er niet bij?</p>
                        <Button variant="primary" size="lg" onClick={() => { const a = document.getElementById('aanbod'); if (!a) return; if (window.MV_SCROLL_TO) window.MV_SCROLL_TO(a); else window.scrollTo({ top: a.offsetTop - 70, behavior: 'smooth' }); }} iconRight={<span aria-hidden="true">→</span>}>Al het aanbod</Button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <style>{`.mvp-buurt-rail::-webkit-scrollbar{height:0}`}</style>
    </section>
  );
}
Object.assign(window, { Buurten });