/* =========== Album / Fotoboek — aparte pagina =========== */
function Album(){
  const t = useT();
  useDocumentMeta({
    title: t('Fotoboek & albums op maat','Custom photo albums'),
    description: t('Een tijdloos trouwalbum op maat van Wedding Visions: handgebonden, premium druk en een persoonlijk ontwerp op basis van uw galerij. Prijs op maat.','A timeless, custom wedding album by Wedding Visions: handbound, premium print and a personal design based on your gallery. Price on request.'),
  });

  // Catalogus-voorbeeld (albums-18 & 20) eerst, zodat die linksboven/vooraan staat
  const albumPhotos = [
    'albums-18','albums-20','albums-1','albums-3','albums-4','albums-5','albums-6','albums-7',
    'albums-8','albums-10','albums-12','albums-13','albums-14','albums-15','albums-17',
    'album-wv-1-2','album-wv-2-2','album-wv-3-2',
  ].map(n=> '/assets/fotoboek/'+n+'.jpg');

  const [lbIndex, setLbIndex] = useState(-1);

  return (
    <Page label="Album">
      <Nav current="/album" solid/>

      {/* HERO */}
      <section style={{paddingTop:160, paddingBottom:80}}>
        <div className="wrap">
          <div className="reveal album-hero" style={{display:'grid', gridTemplateColumns:'1.2fr 1fr', gap:60, alignItems:'end'}}>
            <div>
              <div className="h-number">{t('ALBUMS & FOTOBOEK','ALBUMS & PHOTO BOOK')}</div>
              <h1 className="h-display" style={{fontSize:'clamp(44px,6vw,88px)', marginTop:40, lineHeight:.9}}>
                {t(<>Een tastbaar<br/><span className="italic-serif">aandenken</span>.</>,
                   <>A tangible<br/><span className="italic-serif">keepsake</span>.</>)}
              </h1>
            </div>
            <div style={{maxWidth:420, paddingBottom:20}}>
              <p style={{fontSize:16, lineHeight:1.7, color:'var(--ink-80)', margin:0}}>
                {t('Uw mooiste beelden verdienen meer dan een scherm. Wij ontwerpen een tijdloos fotoboek op maat dat uw verhaal pagina na pagina vertelt, om generaties lang te koesteren.','Your most beautiful images deserve more than a screen. We design a timeless, custom photo book that tells your story page by page, to cherish for generations.')}
              </p>
              <Link to="/contact" className="btn btn-primary" style={{marginTop:28}} data-cursor="hover">
                {t('Vraag uw album aan','Request your album')} <span className="arrow"></span>
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* ALBUMS — tekst met schuine catalogusfoto links */}
      <section style={{background:'var(--paper)', padding:'120px 0', position:'relative'}}>
        <div className="wrap">
          <div className="album-tastbaar reveal">
            <div className="album-tastbaar__media">
              <img src="/assets/fotoboek/albums-20.jpg" alt={t('Handgebonden trouwalbum op maat van Wedding Visions','Handbound custom wedding album by Wedding Visions')} loading="lazy"
                onError={(e)=>{ e.target.style.display='none'; }}/>
            </div>
            <div className="album-tastbaar__body">
              <div className="h-number">ALBUMS</div>
              <h2 className="h-display" style={{fontSize:'clamp(30px,3.6vw,52px)', marginTop:16, lineHeight:.98}}>
                {t(<>Niet alleen digitaal,<br/>ook <span className="italic-serif">tastbaar</span>.</>,
                   <>Not only digital,<br/>also <span className="italic-serif">tangible</span>.</>)}
              </h2>
              <div className="album-text__body" style={{marginTop:26}}>
                <p>{t('Naast het online fotoalbum dat jullie van ons ontvangen, kunnen we ook een fysiek fotoalbum voorzien. Zo blijft jullie trouwdag niet alleen digitaal bewaard, maar wordt die ook tastbaar.','Alongside the online photo album you receive from us, we can also provide a physical photo album. That way your wedding day isn\'t only preserved digitally, but becomes tangible too.')}</p>
                <p>{t('Een fotoalbum is de mooiste manier om jullie dag snel en gemakkelijk opnieuw te herbeleven, zonder telkens door een online galerij te scrollen. Het brengt alle belangrijke momenten samen in één stijlvol geheel dat je erbij neemt wanneer je maar wilt, of deelt met familie en vrienden.','A photo album is the most beautiful way to relive your day quickly and easily, without scrolling through an online gallery every time. It brings all the important moments together in one stylish whole that you can pick up whenever you like, or share with family and friends.')}</p>
                <p>{t('Ook voor video kunnen we een mooie fysieke drager of presentatie voorzien, zodat jullie herinneringen op een persoonlijke en duurzame manier bewaard blijven.','For video too, we can provide a beautiful physical medium or presentation, so your memories are preserved in a personal and lasting way.')}</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* OP MAAT GEMAAKT — tekst links, reels rechts (zoals de ALBUMS-sectie) */}
      <section style={{padding:'120px 0'}}>
        <div className="wrap">
          <div className="album-opmaat reveal">
            <div className="album-opmaat__text">
              <div className="h-number">{t('OP MAAT GEMAAKT','MADE TO MEASURE')}</div>
              <h2 className="h-display" style={{fontSize:'clamp(30px,3.6vw,52px)', marginTop:16, lineHeight:.98}}>
                {t(<>Samen <span className="italic-serif">samengesteld</span>.</>,
                   <>Composed <span className="italic-serif">together</span>.</>)}
              </h2>
              <div className="album-text__body" style={{marginTop:24}}>
                <p>{t('Na de trouw zitten we graag samen om jullie album volledig op maat samen te stellen. We bekijken samen welke beelden jullie graag willen opnemen en welke stijl het best bij jullie past.','After the wedding we love to sit down together to compose your album entirely to your taste. Together we look at which images you\'d like to include and which style suits you best.')}</p>
                <p>{t('Jullie kiezen zelf hoe uitgebreid jullie het album willen maken. Tijdens het samenstellen krijgen jullie meteen een duidelijke prijscalculatie, zodat jullie perfect weten waar jullie aan toe zijn.','You decide how extensive you want the album to be. While composing it, you immediately receive a clear price calculation, so you know exactly where you stand.')}</p>
                <p>{t('Alles kan naar wens gekozen worden: de cover, het formaat, de papierdikte, de afwerking en de opbouw van het album aan de binnenkant. Zo maken we samen van jullie trouwdag een tastbare herinnering die volledig bij jullie past.','Everything can be chosen to your liking: the cover, the format, the paper thickness, the finish and the layout of the album inside. Together we turn your wedding day into a tangible memory that fully suits you.')}</p>
              </div>
            </div>
            <div className="album-opmaat__reels">
              <ReelStack videos={REELS}/>
            </div>
          </div>
        </div>
      </section>

      {/* GALERIJ — sleepbare auto-loop marquee over volledige breedte */}
      <section style={{padding:'120px 0', overflow:'hidden'}}>
        <div className="wrap-wide">
          <div className="reveal" style={{marginBottom:50}}>
            <div className="h-number">{t('VOORBEELDEN','EXAMPLES')}</div>
            <h2 className="h-display" style={{fontSize:'clamp(32px,4vw,56px)', marginTop:16, lineHeight:.95}}>
              {t(<>Onze <span className="italic-serif">albums</span>.</>,
                 <>Our <span className="italic-serif">albums</span>.</>)}
            </h2>
          </div>
        </div>
        <AlbumMarquee images={albumPhotos} onOpen={setLbIndex}/>
        <div className="wrap-wide">
          <div className="album-strip__hint">{t('Neem vast en sleep, of laat de albums automatisch voorbijglijden.','Grab and drag, or let the albums glide by automatically.')}</div>
        </div>
        {lbIndex >= 0 && (
          <AlbumLightbox images={albumPhotos} index={lbIndex} onClose={()=>setLbIndex(-1)} onIndex={setLbIndex}/>
        )}
      </section>


      {/* CTA */}
      <section style={{background:'var(--cocoa)', color:'var(--ivory)', padding:'120px 0'}}>
        <div className="wrap" style={{textAlign:'center'}}>
          <div className="reveal">
            <div className="h-number" style={{color:'rgba(255,255,255,.5)'}}>{t('UW VERHAAL, TASTBAAR','YOUR STORY, TANGIBLE')}</div>
            <h2 className="h-display" style={{fontSize:'clamp(36px,5vw,72px)', marginTop:24, lineHeight:1}}>
              {t(<>Klaar voor uw<br/><span className="italic-serif">fotoboek</span>?</>,
                 <>Ready for your<br/><span className="italic-serif">photo book</span>?</>)}
            </h2>
            <div style={{marginTop:48}}>
              <Link to="/contact" className="btn btn-ghost-light" data-cursor="hover">
                {t('Plan vrijblijvend gesprek','Book a no-obligation call')} <span className="arrow"></span>
              </Link>
            </div>
          </div>
        </div>
      </section>

      <Footer/>

      <style>{`
        /* Op maat-sectie: tekst links, swipebare reels-waaier rechts (zoals ALBUMS hierboven) */
        .album-opmaat{display:flex; justify-content:center; align-items:center; gap:55px; flex-wrap:wrap}
        .album-opmaat__text{flex:0 1 540px}
        .album-opmaat__reels{flex:0 0 auto; display:flex}
        .reel-stack{position:relative; width:298px}
        .reel-stack__cards{position:relative; width:298px; height:529px}
        .reel-card{position:absolute; inset:0; border-radius:12px; overflow:hidden; background:var(--ink);
          box-shadow:0 24px 60px rgba(20,18,16,.32); transform-origin:bottom center; will-change:transform}
        .reel-card video{width:100%; height:100%; object-fit:cover; display:block; pointer-events:none}
        .reel-hint{position:absolute; top:-30px; right:0; z-index:10; pointer-events:none;
          display:inline-flex; align-items:center; gap:7px; font-size:10px; letter-spacing:.22em;
          text-transform:uppercase; color:var(--ink-40)}
        @media (max-width:860px){
          .album-opmaat{flex-direction:column; gap:36px}
          .album-opmaat__text{flex-basis:auto}
        }
        @media (max-width:600px){ .reel-stack, .reel-stack__cards{width:240px} .reel-stack__cards{height:427px} }

        /* ALBUMS-sectie met schuine catalogusfoto links */
        .album-tastbaar{display:grid; grid-template-columns:0.85fr 1.15fr; gap:72px; align-items:center; position:relative}
        .album-tastbaar__media{position:relative; display:flex; justify-content:center}
        .album-tastbaar__media img{
          display:block; width:100%; max-width:340px; height:auto; border-radius:4px;
          box-shadow:0 30px 70px rgba(20,18,16,.30);
          transform:rotate(-6deg);
          margin:-52px 0; position:relative; z-index:3;
        }
        @media (max-width:860px){
          .album-tastbaar{grid-template-columns:1fr; gap:24px}
          .album-tastbaar__media{justify-content:flex-start}
          .album-tastbaar__media img{max-width:240px; margin:0 0 8px; transform:rotate(-4deg);
            box-shadow:0 20px 44px rgba(20,18,16,.24)}
        }

        /* Tekstsecties */
        .album-text{display:grid; grid-template-columns:0.8fr 1.2fr; gap:64px; align-items:start}
        .album-text__body p{font-size:16px; line-height:1.85; color:var(--ink-80); margin:0 0 18px; max-width:640px}
        .album-text__body p:last-child{margin-bottom:0}
        .album-optlabel{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-40); margin-top:30px}
        .album-opts{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}
        .album-opt{padding:9px 16px; border:1px solid var(--ink-20); border-radius:999px;
          font-size:12px; letter-spacing:.08em; color:var(--ink-80)}

        /* Sleepbare auto-loop marquee met albumfoto's */
        .album-marquee{width:100%; overflow:hidden; cursor:grab; user-select:none; -webkit-user-select:none; touch-action:pan-y}
        .album-marquee:active{cursor:grabbing}
        .album-marquee__track{display:flex; gap:16px; width:max-content; will-change:transform}
        .album-marquee__cell{flex:0 0 auto; height:440px; overflow:hidden; border-radius:4px; background:var(--paper)}
        .album-marquee__cell img{height:100%; width:auto; display:block; pointer-events:none}
        .album-strip__hint{margin-top:22px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-40)}

        @media (max-width:1024px){
          .album-marquee__cell{height:380px}
        }
        @media (max-width:860px){
          .album-text{grid-template-columns:1fr; gap:28px}
          .album-hero{grid-template-columns:1fr !important; gap:32px}
          .album-marquee__cell{height:340px}
        }
        @media (max-width:600px){
          .album-marquee__cell{height:300px}
          .album-text__body p{font-size:15px; line-height:1.75}
          .album-strip__hint{letter-spacing:.12em}
        }
        @media (max-width:430px){
          .album-marquee__cell{height:260px}
          .album-marquee__track{gap:12px}
        }
        @media (orientation:landscape) and (max-height:520px){
          .album-marquee__cell{height:240px}
        }
      `}</style>
    </Page>
  );
}

/* =========== Sleepbare auto-loop marquee voor de albumfoto's =========== */
const REELS = ['/assets/reels/reel-1.mp4','/assets/reels/reel-2.mp4','/assets/reels/reel-3.mp4'];

// Swipebare waaier van reels. Bovenste speelt automatisch (muted, loop).
// Swipe/sleep de bovenste weg -> die schuift naar achter, de volgende speelt. Loopt door.
function ReelStack({videos}){
  const [order, setOrder] = useState(videos.map((_,i)=>i));
  const [dx, setDx] = useState(0);
  const dragging = useRef(false);
  const startX = useRef(0);
  const vids = useRef([]);

  useEffect(()=>{
    const top = order[0];
    videos.forEach((_,i)=>{
      const v = vids.current[i]; if(!v) return;
      if(i===top){ try{ v.currentTime=0; const p=v.play(); if(p&&p.catch) p.catch(()=>{}); }catch(e){} }
      else { try{ v.pause(); }catch(e){} }
    });
  }, [order, videos]);

  const sendBack = ()=> setOrder(o => [...o.slice(1), o[0]]);
  const onDown = (e)=>{ dragging.current=true; startX.current=e.clientX; setDx(0); try{e.currentTarget.setPointerCapture(e.pointerId)}catch(err){} };
  const onMove = (e)=>{ if(dragging.current) setDx(e.clientX - startX.current); };
  const onUp = ()=>{ if(!dragging.current) return; dragging.current=false; const moved=Math.abs(dx); setDx(0); if(moved>64) sendBack(); };

  return (
    <div className="reel-stack">
      <div className="reel-hint" aria-hidden="true">
        <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M10 8l-4 4 4 4M14 8l4 4-4 4"/></svg>
        Swipe
      </div>
      <div className="reel-stack__cards">
        {videos.map((src,i)=>{
          const pos = order.indexOf(i);
          const isTop = pos===0;
          const baseRot = pos*5, baseY = pos*8, scale = 1 - pos*0.05;
          const rot = baseRot + (isTop ? dx/24 : 0);
          return (
            <div key={i} className="reel-card"
              style={{
                zIndex: videos.length - pos,
                transform:'translateX('+(isTop?dx:0)+'px) translateY('+baseY+'px) rotate('+rot+'deg) scale('+scale+')',
                transition: (isTop && dragging.current) ? 'none' : 'transform .55s cubic-bezier(.2,.8,.2,1)',
                opacity: pos>2 ? 0 : 1,
                pointerEvents: isTop ? 'auto' : 'none',
                cursor: isTop ? 'grab' : 'default',
              }}
              onPointerDown={isTop?onDown:undefined}
              onPointerMove={isTop?onMove:undefined}
              onPointerUp={isTop?onUp:undefined}
              onPointerCancel={isTop?onUp:undefined}>
              <video ref={el=> vids.current[i]=el} src={src} muted loop playsInline preload="auto"/>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function AlbumMarquee({images, onOpen}){
  const trackRef = useRef(null);
  const pos = useRef(0);
  const dragging = useRef(false);
  const lastX = useRef(0);
  const moved = useRef(0);
  const paused = useRef(false);

  useEffect(()=>{
    let raf;
    const speed = 0.5; // px per frame, automatische loop
    const tick = ()=>{
      const track = trackRef.current;
      if(track){
        const half = (track.scrollWidth || 2) / 2;
        if(!dragging.current && !paused.current) pos.current -= speed;
        // naadloze loop in beide richtingen
        if(pos.current <= -half) pos.current += half;
        if(pos.current > 0) pos.current -= half;
        track.style.transform = 'translateX(' + pos.current + 'px)';
      }
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return ()=> cancelAnimationFrame(raf);
  }, [images]);

  const onDown = (e)=>{
    dragging.current = true; lastX.current = e.clientX; moved.current = 0;
    if(trackRef.current) trackRef.current.style.cursor = 'grabbing';
    try { e.currentTarget.setPointerCapture(e.pointerId); } catch {}
  };
  const onMove = (e)=>{
    if(!dragging.current) return;
    const dx = e.clientX - lastX.current;
    lastX.current = e.clientX;
    pos.current += dx;
    moved.current += Math.abs(dx);
  };
  const onUp = ()=>{
    dragging.current = false;
    if(trackRef.current) trackRef.current.style.cursor = 'grab';
  };

  const doubled = images.concat(images);
  return (
    <div className="album-marquee"
      onPointerDown={onDown} onPointerMove={onMove} onPointerUp={onUp} onPointerCancel={onUp}
      onMouseEnter={()=>{ paused.current = true; }}
      onMouseLeave={()=>{ paused.current = false; onUp(); }}
    >
      <div className="album-marquee__track" ref={trackRef}>
        {doubled.map((src,i)=>(
          <div key={i} className="album-marquee__cell" data-cursor="view"
            onClick={()=>{ if(moved.current < 6) onOpen(i % images.length); }}>
            <img src={src} alt={tg('Voorbeeld van een trouwfotoboek op maat van Wedding Visions','Example of a custom wedding photo album by Wedding Visions')} draggable="false"
              onError={(e)=>{ e.target.closest('.album-marquee__cell').style.display='none'; }}/>
          </div>
        ))}
      </div>
    </div>
  );
}

/* =========== Lightbox voor de fotoboek-galerij =========== */
function AlbumLightbox({images, index, onClose, onIndex}){
  const prev = ()=> onIndex((index - 1 + images.length) % images.length);
  const next = ()=> onIndex((index + 1) % images.length);

  useEffect(()=>{
    const prevOverflow = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    const onKey = (e)=>{
      if(e.key === 'Escape') onClose();
      else if(e.key === 'ArrowLeft') prev();
      else if(e.key === 'ArrowRight') next();
    };
    window.addEventListener('keydown', onKey);
    return ()=>{ document.body.style.overflow = prevOverflow; window.removeEventListener('keydown', onKey); };
  }, [index]);

  return (
    <div className="lb" onClick={onClose}>
      <button className="lb__close" onClick={onClose} aria-label={window.WV_LANG==='en'?'Close':'Sluiten'} data-cursor="hover">×</button>
      <button className="lb__nav lb__nav--prev" onClick={(e)=>{e.stopPropagation(); prev();}} aria-label={window.WV_LANG==='en'?'Previous':'Vorige'} data-cursor="hover">‹</button>
      <div className="lb__stage" onClick={(e)=>e.stopPropagation()}>
        <img src={images[index]} alt={tg('Trouwfotoboek van Wedding Visions, voorbeeld ','Wedding photo album by Wedding Visions, example ')+(index+1)}/>
      </div>
      <button className="lb__nav lb__nav--next" onClick={(e)=>{e.stopPropagation(); next();}} aria-label={window.WV_LANG==='en'?'Next':'Volgende'} data-cursor="hover">›</button>
      <div className="lb__count">{index + 1} / {images.length}</div>

      <style>{`
        .lb{position:fixed; inset:0; z-index:9999; background:rgba(15,13,11,.92);
          backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
          display:flex; align-items:center; justify-content:center; padding:40px;
          animation:lb-fade .25s ease}
        @keyframes lb-fade{from{opacity:0}to{opacity:1}}
        .lb__stage{max-width:min(1100px,92vw); max-height:86vh; display:flex; animation:lb-pop .3s cubic-bezier(.2,.8,.2,1)}
        @keyframes lb-pop{from{opacity:0; transform:scale(.97)}to{opacity:1; transform:none}}
        .lb__stage img{max-width:100%; max-height:86vh; object-fit:contain; display:block; box-shadow:0 30px 80px rgba(0,0,0,.5)}
        .lb__close{position:absolute; top:24px; right:28px; width:48px; height:48px; font-size:34px; line-height:1;
          color:#fff; opacity:.85; display:flex; align-items:center; justify-content:center; transition:opacity .2s, transform .2s}
        .lb__close:hover{opacity:1; transform:rotate(90deg)}
        .lb__nav{position:absolute; top:50%; transform:translateY(-50%); width:60px; height:60px;
          font-size:44px; line-height:1; color:#fff; opacity:.7; display:flex; align-items:center; justify-content:center;
          transition:opacity .2s}
        .lb__nav:hover{opacity:1}
        .lb__nav--prev{left:16px}
        .lb__nav--next{right:16px}
        .lb__count{position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
          color:#fff; opacity:.75; font-size:12px; letter-spacing:.25em}
        @media (max-width:600px){
          .lb{padding:16px}
          .lb__nav{width:44px; height:44px; font-size:34px}
          .lb__nav--prev{left:4px}
          .lb__nav--next{right:4px}
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { Album });