// GetContent — content-showcase carrousel (homepage, donkere band).
// Een oneindig, soepel naar links bewegende rij verticale contentblokken
// (9:16, als social-/reelformats) die laat zien hoeveel soorten content er via
// GetContent gemaakt kunnen worden. Puur visueel: niet klikbaar, geen controls,
// geen hover-pauze. De loop is naadloos doordat de items twee keer worden
// gerenderd en de rij precies één set (−50%) opschuift.
//
// ─────────────────────────────────────────────────────────────────────────
//  CONTENT AANLEVEREN / VERVANGEN
//  Dit is de ENIGE lijst die je hoeft aan te passen. Zet je bestanden in
//  /assets/carousel/ en voeg hieronder een regel toe. Elk item:
//    { type: 'image', src: 'assets/carousel/content-01.jpg', alt: 'Beschrijving' }
//    { type: 'video', src: 'assets/carousel/content-02.mp4', poster: 'assets/carousel/content-02.jpg', alt: '' }
//  - type   : 'image' of 'video'
//  - src    : pad naar het bestand (in /assets/carousel/)
//  - alt    : korte omschrijving (alleen nodig bij afbeeldingen)
//  - poster : optioneel eerste-frame plaatje voor video (aanrader voor snelheid)
//  Verhouding advies: verticaal 9:16 (bijv. 1080×1920 of 720×1280).
//  Zie ook assets/carousel/README.md.
// ─────────────────────────────────────────────────────────────────────────

// Bestanden staan in /assets/carousel/. Afbeeldingen en video's worden
// afgewisseld voor een gevarieerde compositie. Nieuwe content toevoegen? Zet
// het bestand in die map en voeg hier één regel toe (zie assets/carousel/README.md).
const GC_SHOWCASE_ITEMS = [
  { type: 'video', src: 'assets/carousel/video-01.mp4', poster: 'assets/carousel/video-01.jpg' },
  { type: 'video', src: 'assets/carousel/video-02.mp4', poster: 'assets/carousel/video-02.jpg' },
  { type: 'image', src: 'assets/carousel/image-01.jpg', alt: 'Productcontent van matt kussen' },
  { type: 'video', src: 'assets/carousel/video-03.mp4', poster: 'assets/carousel/video-03.jpg' },
  { type: 'video', src: 'assets/carousel/video-04.mp4', poster: 'assets/carousel/video-04.jpg' },
  { type: 'video', src: 'assets/carousel/video-05.mp4', poster: 'assets/carousel/video-05.jpg' },
  { type: 'image', src: 'assets/carousel/image-02.jpg', alt: 'Fashion, linnen overhemd' },
  { type: 'video', src: 'assets/carousel/video-06.mp4', poster: 'assets/carousel/video-06.jpg' },
  { type: 'video', src: 'assets/carousel/video-07.mp4', poster: 'assets/carousel/video-07.jpg' },
  { type: 'video', src: 'assets/carousel/video-08.mp4', poster: 'assets/carousel/video-08.jpg' },
  { type: 'image', src: 'assets/carousel/image-03.jpg', alt: 'Sportkleding campagne' },
  { type: 'video', src: 'assets/carousel/video-09.mp4', poster: 'assets/carousel/video-09.jpg' },
  { type: 'video', src: 'assets/carousel/video-10.mp4', poster: 'assets/carousel/video-10.jpg' },
  { type: 'video', src: 'assets/carousel/video-11.mp4', poster: 'assets/carousel/video-11.jpg' },
  { type: 'image', src: 'assets/carousel/image-04.jpg', alt: 'Food content' },
  { type: 'video', src: 'assets/carousel/video-12.mp4', poster: 'assets/carousel/video-12.jpg' },
  { type: 'video', src: 'assets/carousel/video-13.mp4', poster: 'assets/carousel/video-13.jpg' },
];
window.GC_SHOWCASE_ITEMS = GC_SHOWCASE_ITEMS;

function ContentShowcase() {
  const items = window.GC_SHOWCASE_ITEMS || [];

  // Snelheid per breakpoint: seconden dat één item er ± over doet om langs een
  // vast punt te schuiven. De totale duur schaalt mee met het aantal items,
  // zodat de gevoelssnelheid gelijk blijft als je later content toevoegt.
  const perItemFor = (w) => (w <= 560 ? 3.4 : w <= 820 ? 3.9 : w <= 1200 ? 4.4 : 5);
  const [perItem, setPerItem] = React.useState(() =>
    perItemFor(typeof window !== 'undefined' ? window.innerWidth : 1280)
  );
  React.useEffect(() => {
    // Direct zetten (geen rAF-throttle): resize vuurt zelden en setState met
    // dezelfde waarde is een no-op, dus dit is licht én werkt ook wanneer
    // requestAnimationFrame gepauzeerd is (verborgen tab).
    const onResize = () => setPerItem((p) => { const n = perItemFor(window.innerWidth); return n === p ? p : n; });
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);

  // Performance: alleen video's die (bijna) in beeld zijn spelen af en laden;
  // de rest blijft gepauzeerd. Zo draaien er nooit meer dan een handvol video's
  // tegelijk, ook al staan er tientallen in de (verdubbelde) rij. Zichtbare
  // video's spelen altijd door — hover of de horizontale beweging stopt niets.
  React.useEffect(() => {
    const play = (v) => { v.muted = true; const p = v.play(); if (p && p.catch) p.catch(() => {}); };
    const vids = Array.from(document.querySelectorAll('.gc-showcase-item video'));
    const visible = new Set();
    let io = null;
    if ('IntersectionObserver' in window) {
      io = new IntersectionObserver((entries) => {
        entries.forEach((e) => {
          const v = e.target;
          if (e.isIntersecting) { visible.add(v); play(v); }
          else { visible.delete(v); v.pause(); }
        });
      }, { root: null, rootMargin: '150px 320px', threshold: 0.01 });
      vids.forEach((v) => io.observe(v));
    } else {
      vids.forEach((v) => { visible.add(v); play(v); });
    }
    // na terugkeer naar de tab de zichtbare video's weer starten
    const onVis = () => { if (document.visibilityState === 'visible') visible.forEach(play); };
    document.addEventListener('visibilitychange', onVis);
    return () => { if (io) io.disconnect(); document.removeEventListener('visibilitychange', onVis); };
  }, [items.length]);

  const duration = Math.max(20, items.length * perItem).toFixed(1) + 's';

  // Één contentblok. Media vult het hele afgeronde vlak (object-fit: cover),
  // geen overlays, niet klikbaar. Video: autoplay/muted/loop/playsInline.
  const renderMedia = (it, key) => (
    <div className="gc-showcase-item" key={key} aria-hidden={key >= items.length ? true : undefined}>
      {it.type === 'video' ? (
        <video
          src={it.src}
          poster={it.poster || undefined}
          autoPlay
          loop
          muted
          playsInline
          preload="none"
          tabIndex={-1}
          // preload="none": de browser haalt NIETS op tot een video in beeld komt
          // (anders trekt hij vooraf van alle 13 bestanden metadata/data binnen en
          // loopt de verbinding vol — ook de foto's laden dan traag). De poster
          // toont het beeld meteen; pas bij het afspelen (in beeld) laadt de video.
          // Safari speelt muted video's alleen met het autoplay-attribuut, en muted
          // moet écht als attribuut staan (React zet 't enkel als property).
          ref={(el) => { if (!el) return; el.muted = true; el.setAttribute('muted', ''); }}
        />
      ) : (
        <img
          src={it.src}
          alt={it.alt || ''}
          loading="lazy"
          decoding="async"
          draggable={false}
        />
      )}
    </div>
  );

  // Twee identieke sets achter elkaar → de −50%-loop sluit naadloos aan.
  const loop = items.concat(items);

  return (
    <section
      className="gc-showcase gc-dark-pattern"
      style={{ position: 'relative', background: 'var(--surface-dark)', color: 'var(--text-on-dark)', padding: 'clamp(1.5rem, 3vw, 2.5rem) 0 var(--section-pad-y)', overflow: 'hidden' }}
    >
      <div style={{ maxWidth: 'var(--container-wide)', margin: '0 auto', padding: '0 var(--gutter)', textAlign: 'center' }}>
        <span className="gc-eyebrow" style={{ justifyContent: 'center' }}>Gemaakt door onze creators</span>
        <h2 style={{ marginTop: 14, fontSize: 'clamp(2rem, 4vw, 3rem)', fontWeight: 'var(--fw-semibold)', letterSpacing: '-0.02em', lineHeight: 1.12, color: 'var(--text-on-dark)', textWrap: 'balance' }}>
          Alles wat je kunt laten maken
        </h2>
        <p style={{ margin: 'clamp(0.9rem, 2vw, 1.3rem) auto 0', maxWidth: '52ch', fontSize: 'var(--fs-lead)', lineHeight: 1.6, color: 'var(--text-on-dark-muted)', textWrap: 'pretty' }}>
          Het is tijd om gezien te worden.
        </p>
      </div>

      <div className="gc-showcase-viewport" style={{ marginTop: 'clamp(1.25rem, 2.5vw, 2rem)' }}>
        <div className="gc-showcase-track" style={{ ['--gc-showcase-dur']: duration }}>
          {loop.map((it, i) => renderMedia(it, i))}
        </div>
        <div className="gc-showcase-fade is-left" aria-hidden />
        <div className="gc-showcase-fade is-right" aria-hidden />
      </div>
    </section>
  );
}
window.ContentShowcase = ContentShowcase;