/* Impressie — galerij met scroll-gedreven parallax (zoals Events) */
function ImpressieScreen({ onNavigate }) {
  const { Eyebrow, Ornament, Button } = window.LoncinDesignSystem_6f2c51;
  const { PageHead } = window;

  // Volledige reeks; rondgedeeld over drie parallax-kolommen.
  const shots = [
    ['im-amuses.jpg', 'Amuses', '3 / 4'],
    ['im-keuken-actie.jpg', 'De keuken in actie', '4 / 5'],
    ['im-koffie.jpg', 'Koffie & versnaperingen', '4 / 3'],
    ['im-foiegras.jpg', 'Gebakken ganzenlever', '4 / 5'],
    ['im-kreeft-bord.jpg', 'Kreeft van de Oosterschelde', '3 / 4'],
    ['im-wijnen.jpg', 'Grands crus uit de kelder', '3 / 4'],
    ['im-asperges.jpg', 'Witte asperges in het seizoen', '4 / 3'],
    ['im-dessert.jpg', 'Dessert', '4 / 5'],
    ['im-kreeft-plating.jpg', 'Dressuur — kreeftsalade', '3 / 4'],
    ['im-zaal-avond.jpg', 'De zaal bij avond', '4 / 5'],
    ['im-kreeft-rauw.jpg', 'Verse kreeft', '4 / 3'],
    ['im-chef-wild.jpg', 'De chef versnijdt het wild', '4 / 5'],
    ['im-wild-saus.jpg', 'Wild met rijke saus', '4 / 5'],
    ['im-stjacques-truffel.jpg', 'Sint-jakobsvruchten met truffel', '4 / 5'],
    ['im-gevogelte-pan.jpg', 'Gevogelte uit de pan', '4 / 3'],
    ['im-gevogelte-morielje.jpg', 'Gevogelte met morieljesroom', '3 / 4'],
    ['im-vis.jpg', 'Visgerecht', '4 / 5'],
    ['im-morieljes.jpg', 'Verse morieljes', '3 / 4'],
    ['im-wild-bord.jpg', 'Wild met rode kool & spruitjes', '4 / 5'],
    ['im-kreeft-aquarium.jpg', 'Levende kreeft in het aquarium', '3 / 4'],
    ['im-thuline.jpg', 'Thuline Loncin dresseert het dessert', '4 / 5'],
    ['im-bediening.jpg', 'Bediening in de zaal', '4 / 5'],
    ['im-paddenstoelen.jpg', 'Wilde paddenstoelen', '3 / 2'],
    ['im-grandscrus-herfst.jpg', 'Grands crus in het najaar', '2 / 3'],
    ['im-champagne-caviar.jpg', 'Champagne Loncin & caviar', '2 / 3'],
    ['im-wild-versnijden.jpg', 'Het wild wordt versneden', '3 / 2'],
    ['im-tuin.jpg', 'De tuin', '4 / 3'],
  ];

  // Rondverdelen over drie kolommen (behoudt afwisseling staand/liggend).
  const columns = [[], [], []];
  shots.forEach((s, i) => columns[i % 3].push(s));
  const SPEEDS = [-34, 26, -18];

  const colRefs = React.useRef([]);

  React.useEffect(() => {
    const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;

    const seenAt = new WeakMap();
    const mark = (el) => { if (!seenAt.has(el)) seenAt.set(el, (window.performance && performance.now()) || Date.now()); el.classList.add('is-in'); };

    // Watchdog: in sommige capture/embedding-contexten lopen CSS-transities niet
    // door, waardoor een onthulde figuur op opacity:0 blijft hangen. Forceer die
    // dan zichtbaar. Normale browsers ronden de fade ruim hiervoor af.
    let wTicks = 0;
    const watchdog = setInterval(() => {
      wTicks++;
      const now = (window.performance && performance.now()) || Date.now();
      document.querySelectorAll('.ev-reveal.is-in').forEach((el) => {
        const t = seenAt.get(el) || 0;
        if (now - t > 1100 && parseFloat(getComputedStyle(el).opacity) < 0.02) {
          el.style.transition = 'none';
          el.style.opacity = '1';
          el.style.transform = 'none';
        }
      });
      if (wTicks > 16) clearInterval(watchdog);
    }, 300);

    const reveal = () => {
      const vh = window.innerHeight || 800;
      document.querySelectorAll('.ev-reveal').forEach((el) => {
        if (el.getBoundingClientRect().top < vh * 0.9) mark(el);
      });
    };
    const io = new IntersectionObserver(
      (entries) => entries.forEach((e) => { if (e.isIntersecting) mark(e.target); }),
      { threshold: 0.14 }
    );
    document.querySelectorAll('.ev-reveal').forEach((el) => io.observe(el));

    if (reduce) { reveal(); return () => { io.disconnect(); clearInterval(watchdog); }; }

    let raf = null;
    const update = () => {
      raf = null;
      const vh = window.innerHeight || 800;
      colRefs.current.forEach((el, i) => {
        if (!el) return;
        const rect = el.getBoundingClientRect();
        const center = rect.top + rect.height / 2;
        const offset = Math.max(-0.6, Math.min(0.6, (center - vh / 2) / vh));
        el.style.transform = `translate3d(0, ${(offset * SPEEDS[i]).toFixed(1)}px, 0)`;
      });
      reveal();
    };
    const onScroll = () => { if (!raf) raf = requestAnimationFrame(update); };
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    update();
    return () => {
      io.disconnect();
      clearInterval(watchdog);
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
      if (raf) cancelAnimationFrame(raf);
    };
  }, []);

  return (
    <main style={{ paddingBottom: 'var(--space-9)' }}>
      <PageHead
        eyebrow="Impressie"
        title="Een blik in het huis"
        intro="Sfeer, gerechten en de zalen van Restaurant Loncin — een blik in het huis."
      />

      <section style={{ padding: '0 var(--gutter)' }}>
        <div style={{ maxWidth: 'var(--container-prose)', margin: '0 auto var(--space-7)', textAlign: 'center', position: 'relative', zIndex: 2 }}>
          <Eyebrow align="center" rule>Beeld voor beeld</Eyebrow>
          <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', color: 'var(--text-secondary)', fontSize: 'var(--text-body-lg)', marginTop: '1.2rem' }}>
            Scroll door de beelden — van het seizoenproduct tot het bord en de zaal.
          </p>
        </div>

        <div
          className="ev-gallery"
          style={{
            maxWidth: 'var(--container-max)',
            margin: 'clamp(3rem, 6vw, 5rem) auto 0',
            position: 'relative',
            zIndex: 1,
            display: 'grid',
            gridTemplateColumns: 'repeat(3, 1fr)',
            gap: 'clamp(0.8rem, 1.6vw, 1.4rem)',
            alignItems: 'start',
          }}
        >
          {columns.map((col, ci) => (
            <div
              key={ci}
              ref={(el) => (colRefs.current[ci] = el)}
              style={{
                display: 'flex',
                flexDirection: 'column',
                gap: 'clamp(0.8rem, 1.6vw, 1.4rem)',
                marginTop: ci === 1 ? 'clamp(1.5rem, 5vw, 4rem)' : 0,
                willChange: 'transform',
              }}
            >
              {col.map(([src, label, ratio]) => (
                <figure key={src} className="ev-reveal" style={{ margin: 0 }}>
                  <div style={{ width: '100%', aspectRatio: ratio, borderRadius: 'var(--radius-card)', overflow: 'hidden', background: 'var(--surface-raised, #1a1714)' }}>
                    <img
                      src={window.RES('assets/' + src)}
                      alt={label}
                      loading="lazy"
                      style={{ display: 'block', width: '100%', height: '100%', objectFit: 'cover' }}
                    />
                  </div>
                  <figcaption style={{ fontFamily: 'var(--font-serif)', fontSize: 'var(--text-body-sm, 0.95rem)', color: 'var(--text-secondary)', marginTop: '0.6rem' }}>{label}</figcaption>
                </figure>
              ))}
            </div>
          ))}
        </div>
      </section>

      <div style={{ maxWidth: 460, margin: 'var(--space-8) auto' }}><Ornament variant="diamond" /></div>

      <section style={{ textAlign: 'center', padding: '0 var(--gutter)' }}>
        <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', color: 'var(--text-secondary)', fontSize: 'var(--text-body-lg)', maxWidth: '44ch', margin: '0 auto 1.8rem' }}>
          Kom het zelf beleven — wij ontvangen u graag aan tafel.
        </p>
        <div style={{ display: 'flex', gap: '1rem', justifyContent: 'center', flexWrap: 'wrap' }}>
          <Button variant="primary" onClick={() => onNavigate('reserve')}>Reserveren</Button>
          <Button variant="ghost" onClick={() => onNavigate('contact')}>Contact</Button>
        </div>
      </section>
    </main>
  );
}
Object.assign(window, { ImpressieScreen });