/* =========== Brochure — doorbladerbaar digitaal boek + A4 PNG export =========== */

function ensureLib(){
  return new Promise((resolve, reject)=>{
    if(window.htmlToImage) return resolve(window.htmlToImage);
    let s = document.getElementById('h2i-script');
    if(!s){
      s = document.createElement('script');
      s.id = 'h2i-script';
      s.src = 'https://unpkg.com/html-to-image@1.11.11/dist/html-to-image.js';
      document.head.appendChild(s);
    }
    s.addEventListener('load', ()=> resolve(window.htmlToImage));
    s.addEventListener('error', ()=> reject(new Error('export-bibliotheek kon niet laden')));
    if(window.htmlToImage) resolve(window.htmlToImage);
  });
}

function ensurePdfLib(){
  return new Promise((resolve, reject)=>{
    if(window.jspdf && window.jspdf.jsPDF) return resolve(window.jspdf.jsPDF);
    let s = document.getElementById('jspdf-script');
    if(!s){
      s = document.createElement('script');
      s.id = 'jspdf-script';
      s.src = 'https://unpkg.com/jspdf@2.5.1/dist/jspdf.umd.min.js';
      document.head.appendChild(s);
    }
    s.addEventListener('load', ()=> resolve(window.jspdf && window.jspdf.jsPDF));
    s.addEventListener('error', ()=> reject(new Error('PDF-bibliotheek kon niet laden')));
    if(window.jspdf && window.jspdf.jsPDF) resolve(window.jspdf.jsPDF);
  });
}

function inclBtw(price, rate){
  try { return formatEUR(parsePrice(price) * (1 + rate)); } catch(e){ return ''; }
}
const IMG = (n)=> '/assets/brochure/'+n+'.jpg';
const IMG2 = (n)=> '/assets/brochure2/'+n+'.jpg';
const FB = (n)=> '/assets/fotoboek/'+n+'.jpg';

/* ---- A4 frame: optionele titel (Caveat) + paginanummer ---- */
function A4({title, num, children}){
  return (
    <div className="a4">
      {title && <h2 className="a4title">{title}</h2>}
      {title && <div className="a4rule"/>}
      <div className="a4body">{children}</div>
      {num != null && <div className="a4num">{num}</div>}
    </div>
  );
}

function PhotoPage({src, num}){
  return (
    <div className="a4 a4--photo">
      <img src={src} alt="" crossOrigin="anonymous"/>
      {num != null && <div className="a4num a4num--light">{num}</div>}
    </div>
  );
}

function PkgBox({name, price, inclLabel, btwLabel, items, tag, highlight, desc}){
  return (
    <div className={'pbox '+(highlight?'pbox--hl':'')}>
      {tag && <div className="pbox__tag"><span>{tag}</span></div>}
      <div className="pbox__top">
        <h3 className="pbox__name">{name}</h3>
        <div className="pbox__pricewrap">
          <div className="pbox__price">{price}</div>
          {(btwLabel || inclLabel) && <div className="pbox__btw">{btwLabel}{btwLabel&&inclLabel?' · ':''}{inclLabel}</div>}
        </div>
      </div>
      {desc && <p className="pbox__desc">{desc}</p>}
      {items && (
        <ul className="pbox__list">
          {items.map((it,i)=>(<li key={i}><span className="pbox__dash"/><span>{it}</span></li>))}
        </ul>
      )}
    </div>
  );
}

function ExtrasBox({title, list}){
  return (
    <div className="pbox pbox--extras">
      <div className="pbox__top"><h3 className="pbox__name">{title}</h3></div>
      <div className="xgrid">
        {list.map((e,i)=>(
          <div key={i} className="xitem">
            <div className="xitem__name">{e.name}</div>
            <div className="xitem__price">{e.price}</div>
            <div className="xitem__desc">{e.desc}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function Brochure(){
  const t = useT();
  useDocumentMeta({ title: t('Brochure (digitaal boek)','Brochure (digital book)'), description: t('Interne brochurepagina.','Internal brochure page.') });
  const [busy, setBusy] = useState('');
  const [view, setView] = useState('boek');   // 'boek' | 'lijst'
  const [spr, setSpr] = useState(0);
  const [scale, setScale] = useState(0.5);
  const refs = useRef({});
  const pdfRefs = useRef({});
  const stageRef = useRef(null);
  const wheelLock = useRef(false);
  const [exporting, setExporting] = useState(false);
  const [expProg, setExpProg] = useState('');
  const [flip, setFlip] = useState({active:false, dir:0, progress:0, anim:false});
  const dragRef = useRef({startX:0, dir:0, moved:false});

  const download = async (id, file)=>{
    const el = refs.current[id];
    if(!el) return;
    setBusy(id);
    try {
      const lib = await ensureLib();
      if(document.fonts && document.fonts.ready) { try { await document.fonts.ready; } catch(e){} }
      await new Promise(r=> setTimeout(r, 150));
      const dataUrl = await lib.toPng(el, { pixelRatio: 5, backgroundColor: '#F6F2EC', cacheBust: true });
      const a = document.createElement('a');
      a.href = dataUrl; a.download = file;
      document.body.appendChild(a); a.click(); a.remove();
    } catch(e){ alert(t('Export mislukt: ','Export failed: ')+e.message); }
    finally { setBusy(''); }
  };

  const fotoExtras = [
    {name:t('Tweede fotograaf','Second photographer'), price:t('Op aanvraag','On request'), desc:t('Voor extra dekking','For extra coverage')},
    {name:'Same Day Edit', price:'€100', desc:t('Afgeleverd voor dessert','Delivered before dessert')},
  ];
  const videoExtras = [
    {name:'Trailer', price:'€300', desc:t('Tot 240 sec · 72u na de trouw','Up to 240 sec · 72h after the wedding')},
    {name:'Same Day Edit', price:'€200', desc:t('180 tot 240 sec · voor dessert','180 to 240 sec · before dessert')},
    {name:t('Documentaire film','Documentary film'), price:'€200', desc:t('Tot 20 min highlight','Up to 20 min highlight')},
    {name:t('Tweede videograaf','Second videographer'), price:t('Op aanvraag','On request'), desc:t('Extra camerahoeken','Extra camera angles')},
  ];

  const photo = SITE.pricing.photo;
  const video = SITE.pricing.video;
  const combo = SITE.pricing.combo;
  const ww = SITE.werkwijze;

  const wwTL = (steps, start)=>(
    <div className="tl3">
      <div className="tl3__inner">
        <div className="tl3__line"/>
        {steps.map((s,k)=>{
          const i = start + k;
          return (
            <div key={i} className="tl3__step">
              <div className="tl3__node">{i+1}</div>
              <div className="tl3__body">
                <div className="tl3__time">{tphrase(s.time)}</div>
                <div className="tl3__title">{tphrase(s.title)}</div>
                <ul className="tl3__list">{s.bullets.map((b,j)=>(<li key={j}>{tphrase(b)}</li>))}</ul>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );

  const vatWord = t('BTW','VAT');
  const inclWord = t('incl.','incl.');
  const pkg = (p, rate)=> (
    <PkgBox name={p.name} price={p.price} highlight={!!p.tag} tag={tphrase(p.tag)}
      btwLabel={'excl. '+(rate===0.06?'6':'21')+'% '+vatWord} inclLabel={inclBtw(p.price,rate)+' '+inclWord}
      items={p.items.map(it=>tphrase(it))}/>
  );

  // Brochure-titels (Caveat) + toc-labels: NL -> EN
  const BT = {
    'Wie zijn wij?':'Who are we?',
    'Ons team':'Our team',
    'Werkwijze':'Process',
    'Fotografie':'Photography',
    'Videografie':'Videography',
    'Combinatie':'Combination',
    'Photobooth':'Photobooth',
    'Koppelshoot':'Couple shoot',
    'Onze albums':'Our albums',
    'Op maat gemaakt':'Made to measure',
    'Contact':'Contact',
    'Diensten':'Services',
    'Sfeerbeelden':'Atmosphere',
    'Portfolio':'Portfolio',
    "Extra's":"Extras",
  };
  const bt = (s)=> (s && window.WV_LANG==='en') ? (BT[s] || s) : s;

  const portfolioPhotos = ['5','6','7','9','12','13','14','15'];
  const portfolio2 = ['16','17','18','19','20','21','22','23','24','25','26','27','28','29','32','33','34','35','36','37','38','39','40','41','42','43'];

  const items = [
    {id:'cover', label:'Cover', file:'wv-01-cover.png', render:()=>(
      <div className="a4 a4--photo cover">
        <img src="/assets/brochure/cover.jpg" alt="" crossOrigin="anonymous"/>
        <div className="cover__top">
          <div className="cover__title">Brochure</div>
          <div className="cover__rule"/>
          <div className="cover__sub">{t('Trouwfoto- & videografie','Wedding photo & videography')}</div>
        </div>
        <div className="cover__brand">Wedding Visions</div>
      </div>
    )},
    {id:'toc', label:'Inhoudstafel', file:'wv-02-inhoud.png', isToc:true, render:(num, toc)=>(
      <div className="a4 a4--toc">
        <div className="toc__panel">
          <img className="toc__mini" src={IMG('5')} alt="" crossOrigin="anonymous"/>
          <h2 className="a4title">{t('Inhoud','Contents')}</h2>
          <div className="toc__list">
            {toc.map((row,i)=>(
              <div key={i} className={'toc__row '+(row.indent?'toc__row--in ':'')+(row.header?'toc__row--head':'')}>
                <span className="toc__name">{bt(row.name)}</span><span className="toc__dots"/><span className="toc__num">{row.num}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    )},
    {id:'wie', label:'Wie zijn wij', file:'wv-wie-zijn-wij.png', toc:'Wie zijn wij?', render:(num)=>(
      <A4 title={bt('Wie zijn wij?')} num={num}>
        <div className="who">
          <img className="who__img" src="/assets/team-header.jpg" alt="" crossOrigin="anonymous"/>
          <div className="who__text">
            <p>{t('Wedding Visions is ontstaan uit één overtuiging: een trouwdag verdient het om persoonlijk en met oprechte aandacht vastgelegd te worden. Wij werken met een klein, vast team, waardoor kwaliteit altijd voorrang krijgt op kwantiteit.','Wedding Visions was born from one conviction: a wedding day deserves to be captured personally and with genuine attention. We work with a small, permanent team, so quality always comes before quantity.')}</p>
            <p>{t('Onze stijl is high-end, zowel in foto als video, met oog voor de spontane momenten die vaak onopgemerkt voorbijgaan. Geen geforceerde poses, wel echte emoties en verhalen die kloppen. Alle nabewerking gebeurt intern, zodat elk beeld onze signatuur draagt.','Our style is high-end, in both photo and video, with an eye for the spontaneous moments that often pass unnoticed. No forced poses, just genuine emotions and stories that ring true. All editing is done in-house, so every image carries our signature.')}</p>
            <p>{t('Daarom nemen we bewust slechts een beperkt aantal huwelijken per seizoen aan. Elke trouwdag krijgt zo onze volledige aandacht, van de eerste kennismaking tot de oplevering.','That\'s why we deliberately take on only a limited number of weddings per season. This way every wedding day gets our full attention, from the first introduction to delivery.')}</p>
          </div>
        </div>
      </A4>
    )},
    {id:'team', label:'Ons team', file:'wv-team.png', toc:'Ons team', render:(num)=>(
      <A4 title={bt('Ons team')} num={num}>
        <div className="team4">
          {SITE.team.map((m,i)=>(
            <div key={i} className="tm">
              <img className="tm__img" src={m.img} alt={m.name} crossOrigin="anonymous"/>
              <div className="tm__name">{m.name}</div>
              <div className="tm__role">{tphrase(m.role)}</div>
            </div>
          ))}
        </div>
      </A4>
    )},
    {id:'div-ww', label:'Foto (sfeer)', file:'wv-foto-a.png', light:true, render:(num)=> <PhotoPage src={IMG('3')} num={num}/>},
    {id:'ww1', label:'Werkwijze 1/2', file:'wv-werkwijze-1.png', toc:'Werkwijze', render:(num)=>(<A4 title={bt('Werkwijze')} num={num}>{wwTL(ww.slice(0,3),0)}</A4>)},
    {id:'ww2', label:'Werkwijze 2/2', file:'wv-werkwijze-2.png', render:(num)=>(<A4 title={' '} num={num}>{wwTL(ww.slice(3),3)}</A4>)},
    {id:'foto1', label:'Fotografie 1/2', file:'wv-fotografie-1.png', toc:'Fotografie', tocIndent:true, tocHeader:'Diensten', render:(num)=>(
      <A4 title={bt('Fotografie')} num={num}><div className="stack stack--row">{pkg(photo[0],0.06)}{pkg(photo[1],0.06)}</div></A4>
    )},
    {id:'foto2', label:'Fotografie 2/2', file:'wv-fotografie-2.png', render:(num)=>(
      <A4 title={' '} num={num}><div className="stack stack--row">{pkg(photo[2],0.06)}<ExtrasBox title={bt("Extra's")} list={fotoExtras}/></div></A4>
    )},
    {id:'video1', label:'Videografie 1/2', file:'wv-videografie-1.png', toc:'Videografie', tocIndent:true, render:(num)=>(
      <A4 title={bt('Videografie')} num={num}><div className="stack stack--row">{pkg(video[0],0.21)}{pkg(video[1],0.21)}</div></A4>
    )},
    {id:'video2', label:'Videografie 2/2', file:'wv-videografie-2.png', render:(num)=>(
      <A4 title={' '} num={num}><div className="stack stack--row">{pkg(video[2],0.21)}<ExtrasBox title={bt("Extra's")} list={videoExtras}/></div></A4>
    )},
    {id:'combi', label:'Combinatie', file:'wv-combinatie.png', toc:'Combinatie', tocIndent:true, render:(num)=>(
      <A4 title={bt('Combinatie')} num={num}>
        <div className="stack">
          {combo.map((p,i)=>(
            <PkgBox key={i} name={p.name} price={p.price} highlight={!!p.tag} tag={p.tag?tphrase(p.tag):t('10% korting','10% discount')}
              btwLabel={t('excl. BTW','excl. VAT')} inclLabel={(p.incl||'')+' '+inclWord} desc={tphrase(p.desc)}/>
          ))}
        </div>
      </A4>
    )},
    {id:'booth-foto', label:'Photobooth (sfeer)', file:'wv-photobooth-sfeer.png', light:true, render:(num)=> <PhotoPage src={IMG('30')} num={num}/>},
    {id:'booth-foto2', label:'Photobooth (foto)', file:'wv-photobooth-foto.png', light:true, render:(num)=> <PhotoPage src={IMG('10')} num={num}/>},
    {id:'photobooth', label:'Photobooth', file:'wv-photobooth.png', toc:'Photobooth', tocIndent:true, render:(num)=>(
      <A4 title={bt('Photobooth')} num={num}>
        <div className="stack">
          <PkgBox name="Photobooth Basic" price="€250" btwLabel={t('excl. 6% BTW','excl. 6% VAT')} desc={t('Alleen te boeken met een andere dienst.','Only bookable with another service.')}
            items={t(['Startklaar bij receptie','Onbeperkt prints','Uniek custom strookje-ontwerp','Delen via AirDrop, SMS & WhatsApp','(Online) fotoalbum','Props naar keuze','Blijft tot ±1u na de openingsdans'],
                     ['Ready to go at the reception','Unlimited prints','Unique custom strip design','Sharing via AirDrop, SMS & WhatsApp','(Online) photo album','Props of your choice','Stays until ±1h after the first dance'])}/>
          <PkgBox name="Photobooth Pro" price="€450" btwLabel={t('excl. 6% BTW','excl. 6% VAT')} highlight tag="Standalone"
            desc={t('Standalone in West- en Oost-Vlaanderen. 10% korting bij combinatie met een andere dienst.','Standalone in West and East Flanders. 10% discount when combined with another service.')}
            items={t(['Startklaar bij receptie','Onbeperkt prints','Uniek custom strookje-ontwerp','Delen via AirDrop, SMS & WhatsApp','(Online) fotoalbum','Props naar keuze','Ophaling de ochtend na het feest'],
                     ['Ready to go at the reception','Unlimited prints','Unique custom strip design','Sharing via AirDrop, SMS & WhatsApp','(Online) photo album','Props of your choice','Pickup the morning after the party'])}/>
        </div>
      </A4>
    )},
    {id:'koppelshoot', label:'Koppelshoot', file:'wv-koppelshoot.png', toc:'Koppelshoot', tocIndent:true, render:(num)=>(
      <A4 title={bt('Koppelshoot')} num={num}>
        <div className="kopwrap">
          <PkgBox name={t('Koppelshoot','Couple shoot')} price="€300" btwLabel={t('excl. 6% BTW','excl. 6% VAT')} inclLabel={inclBtw('€300',0.06)+' '+inclWord}
            desc={t('Perfect voor een save-the-date of jullie uitnodigingen. Een fijne manier om elkaar en ons al eens te leren kennen voor de grote dag.','Perfect for a save-the-date or your invitations. A lovely way to get to know each other and us before the big day.')}
            items={t(['Gezellige shoot van ±1 uur','20 professioneel afgewerkte foto\'s','Zelf te kiezen uit online album','Kilometervergoeding €0,45/km (exclusief)','Online galerij','Ideaal als kennismaking'],
                     ['A relaxed shoot of ±1 hour','20 professionally edited photos','Chosen by you from an online album','Mileage allowance €0.45/km (excluded)','Online gallery','Ideal as an introduction'])}/>
          <div className="kopphotos">
            {['koppelshoot-1','koppelshoot-2','koppelshoot-3'].map((n,i)=>(
              <img key={i} src={'/assets/koppelshoot/'+n+'.jpg'} alt="" crossOrigin="anonymous"/>
            ))}
          </div>
        </div>
      </A4>
    )},
    {id:'alb-foto', label:'Albums — foto', file:'wv-albums-foto.png', light:true, render:(num)=> <PhotoPage src={IMG('11')} num={num}/>},
    {id:'alb1', label:'Albums — info', file:'wv-albums-1.png', toc:'Onze albums', render:(num)=>(
      <A4 title={bt('Onze albums')} num={num}>
        <div className="albwrap">
          <div className="pbox albwrap__box">
            <p className="pbox__desc albwrap__lead">{t('Naast het online fotoalbum dat jullie ontvangen, voorzien we ook een handgemaakt fysiek fotoalbum. Zo blijft jullie trouwdag niet enkel digitaal bewaard, maar wordt die echt tastbaar. Alles kiezen jullie zelf: de cover, het formaat, de papierdikte, de afwerking en de opbouw — een echt erfstuk om door te geven.','Alongside the online photo album you receive, we also provide a handmade physical photo album. This way your wedding day isn\'t only preserved digitally, but becomes truly tangible. You choose everything yourself: the cover, the format, the paper thickness, the finish and the layout — a real heirloom to pass on.')}</p>
            <div className="albwrap__sep"/>
            <div className="pbox__top">
              <h3 className="pbox__name">{t('Op maat gemaakt','Made to measure')}</h3>
              <div className="pbox__pricewrap"><div className="pbox__price">{t('vanaf €500','from €500')}</div></div>
            </div>
            <p className="pbox__desc">{t('Na de trouw stellen we jullie album volledig op maat samen: cover, formaat, papierdikte, afwerking en de opbouw aan de binnenkant. Tijdens het samenstellen krijgen jullie meteen een duidelijke prijscalculatie, zodat jullie perfect weten waar jullie aan toe zijn.','After the wedding we compose your album entirely to your taste: cover, format, paper thickness, finish and the inside layout. While composing it, you immediately receive a clear price calculation, so you know exactly where you stand.')}</p>
          </div>
          <img className="albwrap__img" src={FB('albums-1')} alt="" crossOrigin="anonymous"/>
        </div>
      </A4>
    )},
    {id:'alb2', label:'Albums — galerij', file:'wv-albums-2.png', render:(num)=>(
      <A4 num={num}>
        <div className="albgrid">
          {['albums-4','albums-3','albums-5','albums-6'].map((n,i)=>(<img key={i} src={FB(n)} alt="" crossOrigin="anonymous"/>))}
        </div>
      </A4>
    )},
  ];

  portfolioPhotos.forEach((n,i)=>{
    items.push({ id:'pf-'+n, label:'Sfeerbeelden '+(i+1), file:'wv-sfeer-'+(i+1)+'.png', light:true,
      toc: i===0 ? 'Sfeerbeelden' : undefined,
      render:(num)=> <PhotoPage src={IMG(n)} num={num}/> });
  });

  // nieuwe portfolio-sectie: alle foto's uit set (2), startend met foto 16
  portfolio2.forEach((n,i)=>{
    const s = String(n);
    const src = s.startsWith('s1:') ? IMG(s.slice(3)) : IMG2(s);
    items.push({ id:'pf2-'+s.replace(':','-'), label:'Portfolio '+(i+1), file:'wv-portfolio-'+(i+1)+'.png', light:true,
      toc: i===0 ? 'Portfolio' : undefined,
      render:(num)=> <PhotoPage src={src} num={num}/> });
  });

  items.push({ id:'pre-contact', label:'Foto (voor contact)', file:'wv-foto-slot.png', light:true,
    render:(num)=> <PhotoPage src="/assets/brochure/eindejaar.jpg" num={num}/> });

  items.push({ id:'contact', label:'Contact', file:'wv-contact.png', toc:'Contact', render:(num)=>(
    <A4 title={bt('Contact')} num={num}>
      <div className="cwrap">
        <div className="contactgrid">
          <div className="crow"><div className="ck">{t('E-mail','Email')}</div><div className="cv">info@weddingvisions.be</div></div>
          <div className="crow"><div className="ck">{t('Telefoon','Phone')}</div><div className="cv">+32 485 92 32 75</div></div>
          <div className="crow"><div className="ck">Studio</div><div className="cv">Gitsestraat 593, 8800 Roeselare, {t('België','Belgium')}</div></div>
          <div className="crow"><div className="ck">Website</div><div className="cv">weddingvisions.be</div></div>
          <div className="crow"><div className="ck">Instagram</div><div className="cv">@weddingvisions.be</div></div>
          <div className="crow"><div className="ck">{t('BTW','VAT')}</div><div className="cv">BE 1031.162.458</div></div>
        </div>
        <p className="cnote">{t('We antwoorden steeds binnen 24u, vrijblijvend en zonder verplichting. Reiskosten binnen België zijn steeds inbegrepen.','We always reply within 24h, free and without obligation. Travel costs within Belgium are always included.')}</p>
        <div className="cbig">Make your wedding<br/>dreams come true.</div>
      </div>
    </A4>
  )});

  items.push({ id:'einde', label:'Slot (logo)', file:'wv-slot.png', render:()=>(
    <div className="a4 endpage">
      <img className="endpage__logo" src="/assets/logo.png" alt="Wedding Visions" crossOrigin="anonymous"/>
    </div>
  )});

  items.forEach((p,i)=>{
    p.num = i+1;
    p.showNum = (i !== 0) && (i !== items.length-1); // niet op cover & laatste pagina
    p.side = (p.num % 2 === 0) ? 'left' : 'right';   // open boek: even=links, oneven=rechts
  });
  const toc = [];
  items.filter(p=>p.toc).forEach(p=>{
    if(p.tocHeader) toc.push({name:p.tocHeader, num:p.num, indent:false, header:true});
    toc.push({name:p.toc, num:p.num, indent:p.tocIndent});
  });

  const PageBody = ({p})=>(
    <div className="bx-page" ref={el=> refs.current[p.id]=el}>
      {p.render(null, toc)}
      {p.showNum && <div className={'pg pg--'+p.side+(p.light?' pg--light':'')}>{p.num}</div>}
    </div>
  );

  // open-boek: cover rechts, daarna telkens 2 pagina's naast elkaar
  const spreads = [[null, items[0]]];
  for(let i=1;i<items.length;i+=2){ spreads.push([items[i], items[i+1]||null]); }
  const goSp = (d)=> setSpr(s=> Math.max(0, Math.min(spreads.length-1, s+d)));

  useEffect(()=>{
    const fit = ()=>{
      const s = stageRef.current; if(!s) return;
      const sc = Math.min((s.clientHeight-48)/1123, (s.clientWidth-150)/1588);
      setScale(Math.max(0.15, Math.min(1, sc)));
    };
    fit();
    window.addEventListener('resize', fit);
    return ()=> window.removeEventListener('resize', fit);
  }, [view]);

  useEffect(()=>{
    const onKey = (e)=>{
      if(e.key==='ArrowRight' || e.key===' ') turn(1);
      else if(e.key==='ArrowLeft') turn(-1);
    };
    window.addEventListener('keydown', onKey);
    return ()=> window.removeEventListener('keydown', onKey);
  }, [spr, flip.active, flip.anim]);

  const PAGE_W = 794;
  const turn = (dir)=>{
    if(flip.active || flip.anim) return;
    if(dir===1 && spr>=spreads.length-1) return;
    if(dir===-1 && spr<=0) return;
    setFlip({active:true, dir, progress:0, anim:true});
    requestAnimationFrame(()=> requestAnimationFrame(()=> setFlip(f=> f.active ? {...f, progress:1} : f)));
    setTimeout(()=>{ setSpr(s=> Math.max(0, Math.min(spreads.length-1, s+dir))); setFlip({active:false, dir:0, progress:0, anim:false}); }, 480);
  };
  const startDrag = (e)=>{
    if(flip.anim) return;
    if(e.target.closest && e.target.closest('button')) return;
    const rect = stageRef.current.getBoundingClientRect();
    const goingNext = e.clientX >= rect.left + rect.width/2;
    if(goingNext && spr >= spreads.length-1) return;
    if(!goingNext && spr <= 0) return;
    dragRef.current = {startX:e.clientX, dir: goingNext?1:-1, moved:false};
    setFlip({active:true, dir: goingNext?1:-1, progress:0.001, anim:false});
    try{ stageRef.current.setPointerCapture(e.pointerId); }catch(_){}
  };
  const moveDrag = (e)=>{
    if(!flip.active || flip.anim) return;
    const dx = e.clientX - dragRef.current.startX;
    if(Math.abs(dx) > 4) dragRef.current.moved = true;
    let prog = (dragRef.current.dir===1 ? -dx : dx) / (PAGE_W*scale);
    prog = Math.max(0, Math.min(1, prog));
    setFlip(f=> f.active ? {...f, progress:prog} : f);
  };
  const endDrag = ()=>{
    if(!flip.active || flip.anim) return;
    const commit = flip.progress > 0.35;
    const dir = flip.dir;
    setFlip(f=> ({...f, anim:true, progress: commit?1:0}));
    setTimeout(()=>{
      if(commit) setSpr(s=> Math.max(0, Math.min(spreads.length-1, s+dir)));
      setFlip({active:false, dir:0, progress:0, anim:false});
    }, 460);
  };

  const downloadPDF = ()=> setExporting(true);

  useEffect(()=>{
    if(!exporting) return;
    let cancelled = false;
    (async ()=>{
      try {
        setExpProg(t('Bibliotheken laden…','Loading libraries…'));
        const lib = await ensureLib();
        const JsPDF = await ensurePdfLib();
        if(document.fonts && document.fonts.ready){ try{ await document.fonts.ready; }catch(e){} }
        const cont = document.getElementById('pdf-export-root');
        if(cont){
          const imgs = Array.from(cont.querySelectorAll('img'));
          await Promise.all(imgs.map(im=> im.complete ? Promise.resolve() : new Promise(r=>{ im.onload=r; im.onerror=r; })));
        }
        await new Promise(r=> setTimeout(r, 250));
        const pdf = new JsPDF({ orientation:'portrait', unit:'px', format:[794,1123], compress:true });
        for(let i=0;i<items.length;i++){
          if(cancelled) return;
          const p = items[i];
          setExpProg(t('Pagina ','Page ')+(i+1)+' / '+items.length+'…');
          const el = pdfRefs.current[p.id];
          if(!el) continue;
          const dataUrl = await lib.toPng(el, { pixelRatio: 2.4, backgroundColor:'#F6F2EC', cacheBust:true });
          if(i>0) pdf.addPage([794,1123],'portrait');
          pdf.addImage(dataUrl, 'PNG', 0, 0, 794, 1123, undefined, 'FAST');
        }
        if(cancelled) return;
        pdf.save('wedding-visions-brochure.pdf');
      } catch(e){ alert(t('PDF-export mislukt: ','PDF export failed: ')+e.message); }
      finally { if(!cancelled){ setExporting(false); setExpProg(''); } }
    })();
    return ()=>{ cancelled = true; };
  }, [exporting]);

  const [spLeft, spRight] = spreads[spr] || [null, null];
  const spLabel = (spLeft?spLeft.num:'') + (spLeft&&spRight?'–':'') + (spRight?spRight.num:'');

  const panel = (it)=> it ? (
    <div className="bx-page">
      {it.render(null, toc)}
      {it.showNum && <div className={'pg pg--'+it.side+(it.light?' pg--light':'')}>{it.num}</div>}
    </div>
  ) : <div className="bx-page book__blank"/>;

  const nextSp = spreads[spr+1] || [null,null];
  const prevSp = spreads[spr-1] || [null,null];
  let baseLeft = spLeft, baseRight = spRight, leafFront=null, leafBack=null, leafSide='fwd', angle=0;
  if(flip.active && flip.dir===1){
    baseLeft = spLeft; baseRight = nextSp[1];
    leafFront = spRight; leafBack = nextSp[0]; leafSide='fwd'; angle = -180*flip.progress;
  } else if(flip.active && flip.dir===-1){
    baseLeft = prevSp[0]; baseRight = spRight;
    leafFront = spLeft; leafBack = prevSp[1]; leafSide='bwd'; angle = 180*flip.progress;
  }

  return (
    <Page label="Digitale brochure">
      <Nav current="/digitale-brochure" solid/>

      <section style={{paddingTop:120, paddingBottom:24}}>
        <div className="wrap" style={{display:'flex', justifyContent:'space-between', alignItems:'flex-end', gap:24, flexWrap:'wrap'}}>
          <h1 className="h-display" style={{fontSize:'clamp(32px,4.5vw,56px)', margin:0, lineHeight:.95}}>
            {t(<>Digitale <span className="italic-serif">brochure</span>.</>,
               <>Digital <span className="italic-serif">brochure</span>.</>)}
          </h1>
          <button className="btn btn-primary" data-cursor="hover" onClick={downloadPDF} disabled={exporting}>
            {exporting ? t('Bezig…','Working…') : t('Download volledige brochure (PDF)','Download full brochure (PDF)')}
          </button>
        </div>
      </section>

      <section style={{paddingBottom:90}}>
        <div className="wrap">
          <div className="reader__bar">
            <button className="reader__btn" data-cursor="hover" onClick={()=>turn(-1)} disabled={spr===0 || flip.anim}>{t('‹ Vorige','‹ Previous')}</button>
            <span className="reader__count">{spr===0 ? t('Cover','Cover') : t('Pagina ','Page ')+spLabel}</span>
            <button className="reader__btn" data-cursor="hover" onClick={()=>turn(1)} disabled={spr===spreads.length-1 || flip.anim}>{t('Volgende ›','Next ›')}</button>
          </div>
          <div className="reader__stage" ref={stageRef}
               onPointerDown={startDrag} onPointerMove={moveDrag} onPointerUp={endDrag} onPointerCancel={endDrag}
               style={{touchAction:'pan-y'}}>
            <button className="reader__nav reader__nav--l" data-cursor="hover" onClick={()=>turn(-1)} disabled={spr===0||flip.anim} aria-label={t('Vorige','Previous')}>‹</button>
            <div className="reader__frame" style={{width:1588*scale, height:1123*scale}}>
              <div className={'book2'+((baseLeft&&baseRight&&!flip.active)?' book2--crease':'')}
                   style={{transform:`scale(${scale})`, transformOrigin:'top left'}}>
                <div className="slot slot--left">{panel(baseLeft)}</div>
                <div className="slot slot--right">{panel(baseRight)}</div>
                {flip.active && (
                  <div className={'leaf leaf--'+leafSide+(flip.anim?' leaf--anim':'')} style={{transform:`rotateY(${angle}deg)`}}>
                    <div className="leaf__face leaf__front">{panel(leafFront)}</div>
                    <div className="leaf__face leaf__back">{panel(leafBack)}</div>
                    <div className="leaf__shade" style={{opacity: Math.min(.45, Math.abs(flip.progress))}}/>
                  </div>
                )}
              </div>
            </div>
            <button className="reader__nav reader__nav--r" data-cursor="hover" onClick={()=>turn(1)} disabled={spr===spreads.length-1||flip.anim} aria-label={t('Volgende','Next')}>›</button>
          </div>
          <div className="reader__hint">{t('Sleep aan de pagina om te bladeren — of gebruik de pijltjestoetsen ← → en de knoppen.','Drag the page to turn — or use the arrow keys ← → and the buttons.')}</div>
        </div>
      </section>

      {exporting && (
        <div id="pdf-export-root" style={{position:'fixed', left:-12000, top:0, width:794, zIndex:-1}} aria-hidden="true">
          {items.map(p=>(
            <div key={p.id} className="bx-page" ref={el=> pdfRefs.current[p.id]=el}>
              {p.render(null, toc)}
              {p.showNum && <div className={'pg pg--'+p.side+(p.light?' pg--light':'')}>{p.num}</div>}
            </div>
          ))}
        </div>
      )}

      {exporting && (
        <div className="pdf-overlay">
          <div className="pdf-overlay__box">
            <div className="pdf-overlay__title">{t('Brochure exporteren naar PDF…','Exporting brochure to PDF…')}</div>
            <div className="pdf-overlay__prog">{expProg}</div>
            <div className="pdf-overlay__hint">{t('Even geduld, dit kan een halve minuut duren.','Please wait, this can take about half a minute.')}</div>
          </div>
        </div>
      )}

      <Footer/>

      <style>{`
        .bx-toggle{display:inline-flex; border:1px solid var(--ink); border-radius:999px; overflow:hidden}
        .bx-toggle button{padding:11px 22px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; background:transparent; color:var(--ink); border:0; cursor:pointer}
        .bx-toggle button.is-active{background:var(--ink); color:var(--ivory)}

        .reader__bar{display:flex; align-items:center; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:20px}
        .reader__btn{padding:10px 18px; border:1px solid var(--ink); background:transparent; color:var(--ink); border-radius:999px; cursor:pointer; font-size:12px; letter-spacing:.08em}
        .reader__btn:disabled{opacity:.3; cursor:default}
        .reader__count{font-family:var(--serif); font-size:18px; min-width:240px; text-align:center}
        .reader__stage{position:relative; display:flex; align-items:center; justify-content:center;
          height:calc(100vh - 230px); min-height:560px; background:#cfc8ba; border:1px solid var(--rule); border-radius:8px; padding:24px}
        .reader__frame{position:relative; box-shadow:0 24px 60px rgba(0,0,0,.28)}
        .book__blank{width:794px; height:1123px; background:#ddd6ca}
        .book2{position:relative; width:1588px; height:1123px; perspective:2600px}
        .book2--crease::after{content:''; position:absolute; left:794px; top:0; bottom:0; width:64px; margin-left:-32px; pointer-events:none; z-index:9;
          background:linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.16), rgba(0,0,0,.16), rgba(0,0,0,0))}
        .slot{position:absolute; top:0; width:794px; height:1123px}
        .slot--left{left:0}
        .slot--right{left:794px}
        .leaf{position:absolute; top:0; width:794px; height:1123px; transform-style:preserve-3d; z-index:20; will-change:transform}
        .leaf--anim{transition:transform .46s cubic-bezier(.33,.06,.28,1)}
        .leaf--fwd{left:794px; transform-origin:left center}
        .leaf--bwd{left:0; transform-origin:right center}
        .leaf__face{position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; overflow:hidden; background:var(--ivory)}
        .leaf__back{transform:rotateY(180deg)}
        .leaf__shade{position:absolute; inset:0; pointer-events:none; background:rgba(0,0,0,.5); z-index:2}
        .pdf-overlay{position:fixed; inset:0; z-index:9999; background:rgba(20,18,16,.72); display:flex; align-items:center; justify-content:center}
        .pdf-overlay__box{background:var(--ivory); color:var(--ink); padding:40px 48px; border-radius:6px; text-align:center; max-width:420px}
        .pdf-overlay__title{font-family:var(--serif); font-size:24px}
        .pdf-overlay__prog{margin-top:14px; font-size:14px; letter-spacing:.04em; color:var(--accent)}
        .pdf-overlay__hint{margin-top:8px; font-size:12px; color:var(--ink-60)}
        .reader__hint{text-align:center; margin-top:16px; font-size:12px; letter-spacing:.1em; color:var(--ink-40); text-transform:uppercase}
        .reader__nav{position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:54px; height:54px; border-radius:999px;
          border:1px solid var(--ink); background:var(--ivory); color:var(--ink); font-size:26px; cursor:pointer; line-height:1}
        .reader__nav:disabled{opacity:.25; cursor:default}
        .reader__nav--l{left:18px}
        .reader__nav--r{right:18px}

        .bx-item__bar{display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:16px; flex-wrap:wrap}
        .bx-item__title{font-family:var(--serif); font-size:22px}
        .bx-item__scroll{overflow:auto; border:1px solid var(--rule); background:#cfc8ba; padding:24px; border-radius:6px}
        .bx-page{width:794px; margin:0 auto; position:relative}
        .pg{position:absolute; bottom:26px; font-size:14px; letter-spacing:.12em; color:var(--ink-40); z-index:4; font-family:var(--sans)}
        .pg--left{left:40px}
        .pg--right{right:40px}
        .pg--light{color:rgba(255,255,255,.92)}

        /* ---- A4 ---- */
        .a4{width:794px; height:1123px; background:var(--ivory); color:var(--ink); box-sizing:border-box;
          padding:58px 60px 52px; display:flex; flex-direction:column; font-family:var(--sans); position:relative; overflow:hidden}
        .a4title{font-family:var(--hand); font-weight:600; font-size:82px; line-height:.85; margin:0 0 4px; color:var(--ink); min-height:70px}
        .a4rule{height:1.5px; background:var(--ink); margin-top:8px}
        .a4body{flex:1 1 auto; min-height:0; display:flex; flex-direction:column; padding:30px 0 0}
        .a4num{position:absolute; right:30px; bottom:24px; font-size:13px; letter-spacing:.1em; color:var(--ink-40)}
        .a4num--light{color:rgba(255,255,255,.92)}

        .a4--photo{padding:0}
        .a4--photo img{width:100%; height:100%; object-fit:cover; object-position:center top; display:block}

        /* cover */
        .cover{position:relative}
        .cover .cover__top{position:absolute; top:48px; left:60px; right:60px; color:#fff}
        .cover__title{font-family:var(--serif); font-weight:700; font-size:118px; line-height:.9; text-transform:uppercase; letter-spacing:.01em}
        .cover__rule{height:2px; background:rgba(255,255,255,.85); margin:18px 0 12px}
        .cover__sub{font-family:var(--hand); font-weight:600; font-size:44px; line-height:1; color:#fff; text-align:center}
        .cover__brand{position:absolute; left:0; right:0; bottom:64px; text-align:center; color:#fff; font-family:var(--serif); font-size:46px}

        /* toc */
        .a4--toc{padding:54px 64px 50px}
        .toc__panel{flex:1 1 auto; display:flex; flex-direction:column; position:relative}
        .toc__mini{width:100%; height:320px; object-fit:cover; object-position:center 45%; border-radius:4px; margin-bottom:30px}
        .toc__list{margin-top:14px; border-top:1.5px solid var(--ink)}
        .toc__row{display:flex; align-items:baseline; gap:14px; padding:9px 0; border-bottom:1px solid var(--rule);
          font-size:16px; letter-spacing:.06em; text-transform:uppercase}
        .toc__name{white-space:nowrap}
        .toc__row--in{padding-left:28px}
        .toc__row--in .toc__name{font-size:13px; color:var(--ink-60)}
        .toc__row--head .toc__name{font-family:var(--serif); text-transform:none; letter-spacing:.02em; font-size:19px}
        .toc__num{font-size:16px; white-space:nowrap; color:var(--ink); font-family:var(--sans); letter-spacing:.06em}
        .toc__dots{flex:1 1 auto; border-bottom:1px dotted var(--ink-40); transform:translateY(-4px)}

        /* pakket-boxen */
        .stack{display:flex; flex-direction:column; gap:22px; flex:1 1 auto; min-height:0}
        .stack--row{flex-direction:row; gap:20px; align-items:stretch}
        .stack--row > *{flex:1 1 0; min-width:0}
        .stack--row .pbox{padding:28px 26px}
        .stack--row .pbox__name, .stack--row .pbox__price{font-size:28px}
        .stack--row .pbox__top{gap:10px}
        .stack--row .pbox__list{grid-template-columns:1fr; gap:11px}
        .stack--row .pbox__list li{font-size:14.5px; line-height:1.45}
        .stack--row .pbox__desc{font-size:14px; line-height:1.6}
        .stack--row .pbox__btw{font-size:10px}
        .pbox{position:relative; border:1.5px solid var(--ink); background:transparent; padding:26px;
          flex:1 1 0; display:flex; flex-direction:column; min-height:0}
        .pbox--hl{background:var(--accent); color:var(--ivory); border-color:var(--accent)}
        .pbox__tag{position:absolute; top:-12px; left:0; right:0; text-align:center}
        .pbox__tag span{display:inline-block; background:var(--ivory); color:var(--accent); border:1px solid var(--accent);
          font-size:9px; letter-spacing:.22em; text-transform:uppercase; padding:6px 14px; font-weight:600; white-space:nowrap}
        .pbox__top{display:flex; justify-content:space-between; align-items:flex-start; gap:14px}
        .pbox__name{font-family:var(--serif); font-size:30px; line-height:.95; margin:0}
        .pbox__pricewrap{text-align:right; flex-shrink:0}
        .pbox__price{font-family:var(--serif); font-size:30px; line-height:.95}
        .pbox__btw{font-size:9px; letter-spacing:.14em; text-transform:uppercase; opacity:.62; margin-top:7px}
        .pbox__desc{font-size:12.5px; line-height:1.55; margin:12px 0 0; opacity:.92}
        .pbox__list{list-style:none; margin:16px 0 0; padding:16px 0 0; border-top:1px solid currentColor;
          display:grid; grid-template-columns:1fr 1fr; gap:9px 24px; flex:1 1 auto; align-content:flex-start}
        .pbox--hl .pbox__list{border-top-color:rgba(255,255,255,.32)}
        .pbox__list li{display:flex; gap:9px; font-size:12.5px; line-height:1.4}
        .pbox__dash{width:13px; height:1px; background:currentColor; margin-top:8px; flex-shrink:0; opacity:.55}

        .pbox--extras .xgrid{display:flex; flex-direction:column; gap:18px; margin-top:6px; flex:1 1 auto; justify-content:center}
        .xitem__name{font-family:var(--serif); font-size:20px}
        .xitem__price{font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-top:5px}
        .xitem__desc{font-size:12px; color:var(--ink-60); margin-top:5px}

        /* werkwijze tijdlijn — lijn links, bolletjes erop, tekst rechts */
        .tl3{flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; padding:6px 0}
        .tl3__inner{position:relative; display:flex; flex-direction:column; gap:64px}
        .tl3__line{position:absolute; left:48px; top:48px; bottom:48px; width:1.5px; background:var(--ink); z-index:0}
        .tl3__step{position:relative; z-index:1; display:flex; align-items:center; gap:42px; width:100%}
        .tl3__node{flex:0 0 auto; width:96px; height:96px; border-radius:999px; background:var(--accent); color:var(--ivory);
          display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:42px; box-shadow:0 0 0 9px var(--ivory)}
        .tl3__body{flex:1 1 auto; min-width:0}
        .tl3__time{font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--accent)}
        .tl3__title{font-family:var(--serif); font-size:37px; line-height:1.03; margin:9px 0 16px}
        .tl3__list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
        .tl3__list li{font-size:16px; line-height:1.6; color:#3a342c}

        /* wie zijn wij */
        .who{display:flex; flex-direction:column; gap:30px; flex:1 1 auto; min-height:0}
        .who__img{width:100%; height:430px; object-fit:cover; border-radius:4px; flex:0 0 auto}
        .who__text{flex:1 1 auto}
        .who__text p{font-size:15px; line-height:1.8; color:#3a342c; margin:0 0 16px}
        .who__text p:last-child{margin-bottom:0}

        /* team */
        .team4{display:grid; grid-template-columns:1fr 1fr; gap:26px 30px; flex:1 1 auto; min-height:0}
        .tm{display:flex; flex-direction:column; min-height:0}
        .tm__img{width:100%; flex:1 1 auto; min-height:0; object-fit:cover; border-radius:4px}
        .tm__name{font-family:var(--serif); font-size:25px; margin-top:14px; line-height:1}
        .tm__role{font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin-top:6px}

        /* albums — sectiestijl zoals website */
        .albintro{display:grid; grid-template-columns:0.82fr 1.18fr; gap:54px; align-items:center; flex:1 1 auto; min-height:0}
        .albintro__media{display:flex; justify-content:center}
        .albintro__media img{width:100%; max-width:300px; aspect-ratio:3/4; object-fit:cover; border-radius:2px;
          transform:rotate(-4deg); box-shadow:0 30px 56px rgba(0,0,0,.26)}
        .albintro__k{font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--accent)}
        .albintro__sub{font-family:var(--serif); font-size:34px; line-height:1.02; margin-top:10px}
        .albintro__rule{height:1.5px; background:var(--ink); margin:18px 0 0}
        .albintro__txt{margin-top:22px}
        .albintro__txt p{font-size:14px; line-height:1.75; color:#3a342c; margin:0 0 14px}
        .albintro__txt p:last-child{margin-bottom:0}
        .albgrid{display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:18px; flex:1 1 auto; min-height:0}
        .albgrid img{width:100%; height:100%; object-fit:cover; border-radius:4px; min-height:0}
        .albwrap{flex:1 1 auto; display:flex; flex-direction:column; gap:24px; min-height:0}
        .albwrap__img{width:100%; flex:1 1 auto; min-height:0; object-fit:cover; border-radius:4px}
        .albwrap__box{flex:0 0 auto}
        .albwrap__lead{margin:0; font-size:14px}
        .albwrap__sep{height:1px; background:var(--rule); margin:18px 0}

        /* slotpagina */
        .endpage{align-items:center; justify-content:center}
        .endpage__logo{width:120px; height:auto; object-fit:contain}

        /* photobooth strookjes-pagina */
        .booth{padding:64px 56px; background:var(--ivory); align-items:center; justify-content:center}
        .booth__strips{flex:1 1 auto; min-height:0; display:flex; gap:20px; align-items:center; justify-content:center; width:100%}
        .booth__strips img{height:100%; max-height:880px; width:auto; object-fit:contain; box-shadow:0 18px 40px rgba(0,0,0,.22); border-radius:2px}
        .booth__cap{flex:0 0 auto; margin-top:30px; font-family:var(--hand); font-size:42px; color:var(--accent); text-align:center}

        /* sectiepagina */
        .sectn{flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center}
        .sectn__k{font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--accent)}
        .sectn__h{font-family:var(--serif); font-weight:700; font-size:76px; line-height:1; margin:18px 0 0}
        .sectn__it{font-style:italic}
        .sectn__rule{width:64px; height:2px; background:var(--ink); margin:28px 0 0}
        .sectn__p{font-size:15px; line-height:1.7; color:#3a342c; margin:24px 0 0; max-width:42ch}

        /* koppelshoot */
        .kopwrap{display:flex; flex-direction:column; gap:20px; flex:1 1 auto; min-height:0}
        .kopwrap > .pbox{flex:1 1 auto}
        .kopphotos{flex:0 0 320px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; min-height:0}
        .kopphotos img{width:100%; height:100%; object-fit:cover; border-radius:4px; min-height:0}

        /* contact */
        .cwrap{flex:1 1 auto; display:flex; flex-direction:column}
        .clogo{height:88px; width:auto; object-fit:contain; align-self:center; margin:4px 0 36px}
        .contactgrid{border-top:1.5px solid var(--ink)}
        .crow{display:grid; grid-template-columns:150px 1fr; gap:24px; padding:20px 0; border-bottom:1px solid var(--rule)}
        .ck{font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:#9a9186; padding-top:6px}
        .cv{font-family:var(--serif); font-size:25px}
        .cnote{font-size:14px; line-height:1.7; color:#3a342c; margin:34px 0 0; max-width:60ch}
        .cbig{margin-top:auto; font-family:var(--hand); font-size:60px; line-height:1; color:var(--accent)}

        @media (max-width:900px){ .bx-item__bar{flex-direction:column; align-items:flex-start} }
      `}</style>
    </Page>
  );
}

Object.assign(window, { Brochure });