/* =========== Portfolio Detail page =========== */
function Lightbox({images, index, onClose, onNav, coupleName}){
  useEffect(()=>{
    if(index < 0) return;
    const onKey = (e)=>{
      if(e.key === 'Escape') onClose();
      else if(e.key === 'ArrowRight') onNav(1);
      else if(e.key === 'ArrowLeft') onNav(-1);
    };
    document.body.style.overflow = 'hidden';
    window.addEventListener('keydown', onKey);
    return ()=>{
      document.body.style.overflow = '';
      window.removeEventListener('keydown', onKey);
    };
  }, [index, onClose, onNav]);

  if(index < 0 || !images || !images.length) return null;
  const img = images[index];
  const t = useT();
  return (
    <div className="lb" onClick={onClose}>
      <div className="lb__note">
        {t("Gecomprimeerde preview. Foto's kunnen hier door compressie iets minder scherp lijken dan in werkelijkheid.","Compressed preview. Due to compression, photos may appear slightly less sharp here than in reality.")}
      </div>
      <button className="lb__close" onClick={onClose} aria-label={t('Sluiten','Close')}>×</button>
      <button className="lb__nav lb__nav--prev" onClick={e=>{e.stopPropagation(); onNav(-1);}} aria-label={t('Vorige','Previous')}>‹</button>
      <button className="lb__nav lb__nav--next" onClick={e=>{e.stopPropagation(); onNav(1);}} aria-label={t('Volgende','Next')}>›</button>
      <div className="lb__stage" onClick={e=>e.stopPropagation()}>
        <img src={img} alt={(coupleName ? coupleName + ' — ' : '') + t('trouwfotografie door Wedding Visions','wedding photography by Wedding Visions')} key={img}/>
      </div>
      <div className="lb__meta">
        <span>{index+1} / {images.length}</span>
      </div>
    </div>
  );
}

// Convert various video URLs to an embeddable player URL
function toEmbedUrl(url){
  if(!url) return '';
  const u = url.trim();
  // Vimeo: vimeo.com/ID or vimeo.com/ID/HASH or player.vimeo.com/video/ID
  let m = u.match(/vimeo\.com\/(?:video\/)?(\d+)(?:\/([A-Za-z0-9]+))?/);
  if(m){
    const id = m[1]; const hash = m[2];
    return 'https://player.vimeo.com/video/' + id + (hash ? '?h='+hash : '');
  }
  // YouTube: youtu.be/ID, youtube.com/watch?v=ID, youtube.com/embed/ID
  m = u.match(/(?:youtu\.be\/|youtube\.com\/(?:watch\?v=|embed\/|v\/))([\w-]{6,})/);
  if(m) return 'https://www.youtube.com/embed/' + m[1];
  return u;
}

function PortfolioDetail({slug}){
  const t = useT();
  const [item, setItem] = useState(null);
  const [status, setStatus] = useState('loading');
  const [allItems, setAllItems] = useState([]);
  const [lbIndex, setLbIndex] = useState(-1);
  const [mediaTab, setMediaTab] = useState('foto');

  // Per-portfolio SEO meta (updates on item load)
  useDocumentMeta({
    title: item ? `${item.couple} · ${item.place || t('trouwverhaal','wedding story')}` : t('Verhaal','Story'),
    description: item
      ? (item.description ? item.description.slice(0, 160) : t(`Trouwverhaal van ${item.couple} in ${item.place || 'België'}, vastgelegd door Wedding Visions.`, `Wedding story of ${item.couple} in ${item.place || 'Belgium'}, captured by Wedding Visions.`))
      : t('Trouwverhaal vastgelegd door Wedding Visions.','Wedding story captured by Wedding Visions.'),
    image: item?.img,
    type: 'article',
  });

  // Structured data: ImageGallery for the wedding (canonical NL text).
  useJsonLd('portfolio-detail', item ? {
    '@context':'https://schema.org',
    '@type':'ImageGallery',
    name: item.couple + ' — trouwfotografie Wedding Visions',
    description: 'Trouwfotografie en -videografie van ' + item.couple
      + (item.place ? ' in ' + item.place : '') + ', vastgelegd door Wedding Visions.',
    about: 'Trouwfotografie en trouwvideografie',
    url: SITE_ORIGIN + '/portfolio/' + (item.slug || ''),
    ...(item.place ? { locationCreated: { '@type':'Place', name: item.place } } : {}),
    ...(item.date ? { datePublished: item.date } : {}),
    author: { '@type':'Organization', name:'Wedding Visions', url: SITE_ORIGIN },
    image: [item.img, ...(Array.isArray(item.gallery) ? item.gallery : [])].filter(Boolean).slice(0, 30),
  } : null);

  useEffect(()=>{
    setStatus('loading');
    setLbIndex(-1);
    fetch('/api/portfolio').then(r=>r.json()).then(data=>{
      const slugs = new Set((data||[]).map(d=>d.slug));
      const combined = [...(data||[]), ...SITE.portfolioSeed.filter(s=> !slugs.has(s.slug))];
      setAllItems(combined);
    }).catch(()=> setAllItems(SITE.portfolioSeed));

    const fallback = ()=>{
      const seed = SITE.portfolioSeed.find(s=> s.slug === slug);
      if(seed){
        setItem({
          description: seed.description || '',
          quote: seed.quote || '',
          quote_author: seed.quote_author || '',
          gallery: seed.gallery || [],
          ...seed,
        });
        setStatus('ok');
      } else setStatus('notfound');
    };
    fetch('/api/portfolio/'+encodeURIComponent(slug))
      .then(async r=> r.ok ? r.json() : null)
      .then(cms=>{
        if(cms){ setItem(cms); setStatus('ok'); }
        else fallback();
      })
      .catch(fallback);
  }, [slug]);

  // Standaard altijd eerst de foto-tab tonen (daarna pas video)
  useEffect(()=>{
    setMediaTab('foto');
  }, [item && item.slug]);

  if(status === 'loading') return (
    <Page label="Verhaal"><Nav current="/portfolio" solid/>
      <section style={{minHeight:'60vh', display:'grid', placeItems:'center'}}>
        <div className="h-number">{t('LADEN...','LOADING...')}</div>
      </section>
      <Footer/>
    </Page>
  );
  if(status === 'notfound') return (
    <Page label="Verhaal niet gevonden"><Nav current="/portfolio" solid/>
      <section style={{paddingTop:160, paddingBottom:120, textAlign:'center'}}>
        <div className="wrap">
          <div className="h-number">404</div>
          <h1 className="h-display" style={{fontSize:'clamp(48px,7vw,96px)', marginTop:24, lineHeight:1}}>
            {t(<>Dit verhaal bestaat<br/><span className="italic-serif">(nog)</span> niet.</>,
               <>This story doesn't<br/>exist <span className="italic-serif">(yet)</span>.</>)}
          </h1>
          <div style={{marginTop:40}}>
            <Link to="/portfolio" className="btn btn-ghost" data-cursor="hover">{t('Terug naar portfolio','Back to portfolio')} <span className="arrow"></span></Link>
          </div>
        </div>
      </section>
      <Footer/>
    </Page>
  );

  const idx = allItems.findIndex(x=> x.slug === item.slug);
  const prev = idx > 0 ? allItems[idx-1] : (allItems.length ? allItems[allItems.length-1] : null);
  const next = idx < allItems.length-1 ? allItems[idx+1] : (allItems.length ? allItems[0] : null);
  const gallery = Array.isArray(item.gallery) ? item.gallery : [];
  // Lightbox images = hero + gallery
  const lbImages = [item.img, ...gallery].filter(Boolean);
  const catLabelNl = (item.cat || 'foto+video').replace('+', ' + ');
  const catLabel = window.WV_LANG==='en' ? catLabelNl.replace('foto','photo') : catLabelNl;

  const openLightbox = (imgUrl)=>{
    const i = lbImages.indexOf(imgUrl);
    setLbIndex(i >= 0 ? i : 0);
  };
  const navLightbox = (delta)=>{
    setLbIndex(i => {
      if(i < 0) return i;
      const len = lbImages.length;
      return (i + delta + len) % len;
    });
  };

  return (
    <Page label={'Verhaal · '+item.couple}>
      <Nav current="/portfolio" solid/>

      {/* HERO: clean, no overlay meta */}
      <section className="pd-hero">
        <button type="button" className="pd-hero__img" onClick={()=>openLightbox(item.img)} data-cursor="view" aria-label={t('Open foto','Open photo')}>
          <img src={item.img} alt={item.couple + (item.place ? ' · ' + item.place : '') + t(' — trouwfotografie door Wedding Visions',' — wedding photography by Wedding Visions')} loading="eager"/>
        </button>
        <div className="pd-hero__fade"/>
        {catLabel && (
          <div className="pd-hero__type">
            {catLabel.toUpperCase()}
          </div>
        )}
        <div className="pd-hero__content wrap">
          <div className="reveal-stagger">
            <div className="h-number" style={{color:'rgba(255,255,255,.7)'}}>{t('EEN VERHAAL VAN WEDDING VISIONS','A WEDDING VISIONS STORY')}</div>
            <h1 className="h-display" style={{fontSize:'clamp(56px,8vw,128px)', marginTop:24, lineHeight:.9, color:'#fff', maxWidth:'16ch'}}>
              {item.couple}
            </h1>
            <div className="h-hand" style={{color:'#fff', fontSize:26, marginTop:20}}>
              {t('hun liefdesverhaal.','their love story.')}
            </div>
          </div>
        </div>
      </section>

      {/* DETAILS META STRIP: only show if any field is filled */}
      {(item.place || item.date || catLabel || item.quote) && (
        <section style={{padding:'100px 0 40px'}}>
          <div className="wrap">
            <div className="pd-details reveal">
              {item.place && (
                <div className="pd-details__item">
                  <div className="h-number">{t('LOCATIE','LOCATION')}</div>
                  <div className="pd-details__value">{item.place}</div>
                </div>
              )}
              {item.date && (
                <div className="pd-details__item">
                  <div className="h-number">{t('DATUM','DATE')}</div>
                  <div className="pd-details__value">{item.date}</div>
                </div>
              )}
              {catLabel && (
                <div className="pd-details__item">
                  <div className="h-number">{t('TYPE','TYPE')}</div>
                  <div className="pd-details__value" style={{textTransform:'capitalize'}}>{catLabel}</div>
                </div>
              )}
              {item.quote && (
                <div className="pd-details__item">
                  <div className="h-number">{t('REVIEW','REVIEW')}</div>
                  <div className="pd-details__value" style={{fontStyle:'italic', fontFamily:'var(--serif)', fontSize:18, lineHeight:1.4}}>
                    "{item.quote.slice(0, 100)}{item.quote.length > 100 ? '…' : ''}"
                  </div>
                </div>
              )}
            </div>
          </div>
        </section>
      )}

      {/* HET VERHAAL: only show if description is filled */}
      {item.description && (
        <section style={{padding:'40px 0 80px'}}>
          <div className="wrap pd-intro">
            <div className="reveal">
              <div className="h-number">{t('HET VERHAAL','THE STORY')}</div>
              <div className="rule" style={{margin:'16px 0 0'}}/>
            </div>
            <div className="reveal">
              <p style={{fontSize:16, lineHeight:1.85, color:'var(--ink-80)', fontFamily:'var(--sans)', fontWeight:400, whiteSpace:'pre-line'}}>
                {item.description}
              </p>
            </div>
          </div>
        </section>
      )}

      {/* MEDIA: foto gallery + optional video with tabs */}
      {(gallery.length > 0 || item.video_url) && (
        <section style={{padding:'20px 0 100px'}}>
          <div className="wrap">
            {/* Tabs only when BOTH gallery + video exist */}
            {gallery.length > 0 && item.video_url && (
              <div className="pd-mediatabs reveal">
                {[['foto',t('Foto','Photo')],['video',t('Video','Video')]].map(([k,l])=>(
                  <button key={k} onClick={()=>setMediaTab(k)} data-cursor="hover"
                    className={mediaTab===k ? 'active' : ''}>
                    {l}
                  </button>
                ))}
              </div>
            )}

            {/* Video view */}
            {item.video_url && (gallery.length === 0 || mediaTab === 'video') && (
              <div className="pd-video reveal">
                <iframe
                  src={toEmbedUrl(item.video_url)}
                  allow="autoplay; fullscreen; picture-in-picture"
                  allowFullScreen
                  title={item.couple + ' · video'}
                  loading="lazy"
                />
              </div>
            )}

            {/* Gallery view */}
            {gallery.length > 0 && (!item.video_url || mediaTab === 'foto') && (
              <div className="pd-gallery reveal-stagger">
                {gallery.map((g,i)=>(
                  <button key={i} type="button" className="pd-gallery__item" data-cursor="view" onClick={()=>openLightbox(g)}>
                    <img src={g} alt={item.couple + t(' — trouwdag foto ',' — wedding photo ') + (i+1) + t(' van Wedding Visions',' by Wedding Visions')} loading="lazy"/>
                  </button>
                ))}
              </div>
            )}
          </div>
        </section>
      )}

      {/* FULL QUOTE */}
      {item.quote && item.quote.length > 100 && (
        <section style={{background:'var(--paper)', padding:'140px 0', textAlign:'center'}}>
          <div className="wrap" style={{maxWidth:900, margin:'0 auto'}}>
            <div className="reveal">
              <div className="h-display italic-serif" style={{fontSize:120, lineHeight:.3, color:'var(--ink-40)', height:30}}>"</div>
              <p style={{fontSize:'clamp(22px,2.6vw,32px)', lineHeight:1.5, fontFamily:'var(--serif)', fontStyle:'italic', color:'var(--ink)', marginTop:40}}>
                {item.quote}
              </p>
              {item.quote_author && (
                <div style={{marginTop:40, fontSize:11, letterSpacing:'.28em', textTransform:'uppercase', color:'var(--ink-60)'}}>
                  · {item.quote_author}
                </div>
              )}
            </div>
          </div>
        </section>
      )}

      {/* PREV / NEXT */}
      {(prev || next) && (
        <section style={{padding:'120px 0', borderTop:'1px solid var(--rule)'}}>
          <div className="wrap pd-nav">
            {prev ? (
              <Link to={'/portfolio/'+prev.slug} className="pd-nav__side pd-nav__side--prev" data-cursor="view">
                <div className="h-number">{t('VORIG VERHAAL','PREVIOUS STORY')}</div>
                <div className="pd-nav__preview">
                  <img src={prev.img} alt={prev.couple + t(' — trouwverhaal Wedding Visions',' — wedding story by Wedding Visions')} loading="lazy"/>
                </div>
                <div className="h-display" style={{fontSize:32, marginTop:20, lineHeight:1}}>← {prev.couple}</div>
                <div style={{fontSize:11, letterSpacing:'.22em', textTransform:'uppercase', color:'var(--ink-60)', marginTop:8}}>
                  {prev.place} · {prev.date}
                </div>
              </Link>
            ) : <div/>}
            {next ? (
              <Link to={'/portfolio/'+next.slug} className="pd-nav__side pd-nav__side--next" style={{textAlign:'right'}} data-cursor="view">
                <div className="h-number">{t('VOLGEND VERHAAL','NEXT STORY')}</div>
                <div className="pd-nav__preview">
                  <img src={next.img} alt={next.couple + t(' — trouwverhaal Wedding Visions',' — wedding story by Wedding Visions')} loading="lazy"/>
                </div>
                <div className="h-display" style={{fontSize:32, marginTop:20, lineHeight:1}}>{next.couple} →</div>
                <div style={{fontSize:11, letterSpacing:'.22em', textTransform:'uppercase', color:'var(--ink-60)', marginTop:8}}>
                  {next.place} · {next.date}
                </div>
              </Link>
            ) : <div/>}
          </div>
        </section>
      )}

      {/* CTA */}
      <section style={{background:'var(--cocoa)', color:'var(--ivory)', padding:'140px 0'}}>
        <div className="wrap" style={{textAlign:'center'}}>
          <div className="reveal">
            <div className="h-number" style={{color:'rgba(255,255,255,.5)'}}>{t('BENT U HET VOLGENDE VERHAAL?','ARE YOU THE NEXT STORY?')}</div>
            <h2 className="h-display" style={{fontSize:'clamp(40px,5.5vw,76px)', marginTop:24, lineHeight:.9}}>
              {t(<>Laat ons úw <br/><span className="italic-serif">verhaal</span> vertellen.</>,
                 <>Let us tell <br/>your <span className="italic-serif">story</span>.</>)}
            </h2>
            <div style={{marginTop:48, display:'flex', gap:16, justifyContent:'center', flexWrap:'wrap'}}>
              <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>
              <Link to="/portfolio" className="btn" style={{color:'rgba(255,255,255,.6)'}} data-cursor="hover">
                {t('Alle verhalen','All stories')} <span className="arrow"></span>
              </Link>
            </div>
          </div>
        </div>
      </section>

      <Footer/>

      <Lightbox images={lbImages} index={lbIndex} onClose={()=>setLbIndex(-1)} onNav={navLightbox} coupleName={item.couple}/>

      <style>{`
        .pd-hero{position:relative; height:100vh; min-height:600px; display:flex; align-items:flex-end; overflow:hidden; background:#000; max-width:100%}
        .pd-hero__img{position:absolute; inset:0; padding:0; margin:0; border:0; background:none; cursor:pointer; display:block}
        .pd-hero__img img{width:100%; height:100%; object-fit:cover; display:block; transition:transform 2s ease-out}
        .pd-hero__img:hover img{transform:scale(1.03)}
        .pd-hero__fade{position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,18,16,.45) 0%, rgba(20,18,16,.15) 40%, rgba(20,18,16,.85) 100%); pointer-events:none}
        .pd-hero__content{position:relative; z-index:2; padding-bottom:100px; color:#fff; width:100%; pointer-events:none}
        .pd-hero__content > *{pointer-events:auto}

        .pd-hero__type{
          position:absolute;
          top:100px; left:40px;
          z-index:3;
          font-size:10px;
          letter-spacing:.3em;
          text-transform:uppercase;
          color:rgba(255,255,255,.9);
          padding:8px 14px;
          border:1px solid rgba(255,255,255,.5);
          border-radius:999px;
          backdrop-filter:blur(6px);
          -webkit-backdrop-filter:blur(6px);
          background:rgba(0,0,0,.15);
        }
        @media (max-width:900px){
          .pd-hero__type{top:80px; left:20px; font-size:9px; padding:6px 10px}
        }

        .pd-details{
          display:grid;
          grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
          gap:40px;
          padding:32px 0;
          border-top:1px solid var(--ink);
          border-bottom:1px solid var(--ink);
        }
        .pd-details__item{min-width:0}
        .pd-details__value{font-family:var(--serif); font-size:24px; line-height:1.2; margin-top:10px; color:var(--ink)}

        .pd-intro{display:grid; grid-template-columns:1fr 1.6fr; gap:80px}

        .pd-mediatabs{
          display:flex; gap:4px; padding:4px;
          background:var(--paper);
          border:1px solid var(--rule);
          border-radius:999px;
          width:fit-content;
          margin:0 auto 48px;
        }
        .pd-mediatabs button{
          padding:12px 32px;
          border-radius:999px;
          font-size:11px; letter-spacing:.25em; text-transform:uppercase;
          color:var(--ink);
          background:transparent;
          transition:.3s;
        }
        .pd-mediatabs button.active{
          background:var(--ink);
          color:var(--ivory);
        }

        .pd-video{
          position:relative;
          aspect-ratio:16/9;
          width:100%;
          overflow:hidden;
          background:#000;
          border-radius:2px;
        }
        .pd-video iframe{
          position:absolute;
          inset:0;
          width:100%; height:100%;
          border:0;
        }

        .pd-gallery{
          display:grid;
          grid-template-columns:repeat(3, 1fr);
          gap:20px;
        }
        .pd-gallery__item{
          display:block;
          width:100%;
          padding:0;
          border:0;
          background:none;
          cursor:pointer;
          overflow:hidden;
          aspect-ratio:4/5;
        }
        .pd-gallery__item img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .9s cubic-bezier(.2,.8,.2,1)}
        .pd-gallery__item:hover img{transform:scale(1.03)}

        .pd-nav{display:grid; grid-template-columns:1fr 1fr; gap:40px}
        .pd-nav__side{display:block; padding:24px 0}
        .pd-nav__preview{
          aspect-ratio:16/9;
          overflow:hidden;
          margin-top:20px;
          position:relative;
        }
        .pd-nav__preview img{width:100%; height:100%; object-fit:cover; transition:transform .9s cubic-bezier(.2,.8,.2,1)}
        .pd-nav__side:hover .pd-nav__preview img{transform:scale(1.04)}

        /* Lightbox */
        .lb{
          position:fixed; inset:0; z-index:9900;
          background:rgba(20,18,16,.92);
          backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
          display:grid; place-items:center;
          padding:60px 80px;
          animation:lbFadeIn .25s ease-out;
        }
        @keyframes lbFadeIn{from{opacity:0}to{opacity:1}}
        .lb__stage{
          max-width:100%; max-height:100%;
          display:grid; place-items:center;
          animation:lbZoomIn .35s cubic-bezier(.2,.8,.2,1);
        }
        @keyframes lbZoomIn{from{opacity:0; transform:scale(.97)}to{opacity:1; transform:scale(1)}}
        .lb__stage img{
          max-width:100%;
          max-height:88vh;
          object-fit:contain;
          display:block;
          box-shadow:0 20px 80px rgba(0,0,0,.5);
        }
        .lb__note{
          position:absolute;
          top:20px; left:24px;
          max-width:320px;
          font-size:10px;
          letter-spacing:.08em;
          line-height:1.5;
          color:rgba(255,255,255,.55);
          font-style:italic;
          padding-right:12px;
          pointer-events:none;
        }
        .lb__close{
          position:absolute; top:20px; right:24px;
          width:46px; height:46px; border-radius:999px;
          background:transparent; color:#fff; border:1px solid rgba(255,255,255,.4);
          font-size:24px; line-height:1; cursor:pointer;
          transition:.2s;
          display:grid; place-items:center;
        }
        .lb__close:hover{background:#fff; color:var(--ink); border-color:#fff}
        .lb__nav{
          position:absolute; top:50%; transform:translateY(-50%);
          width:52px; height:52px; border-radius:999px;
          background:transparent; color:#fff; border:1px solid rgba(255,255,255,.4);
          font-size:28px; line-height:1; cursor:pointer;
          transition:.2s;
          display:grid; place-items:center;
          padding-bottom:2px;
        }
        .lb__nav--prev{left:24px}
        .lb__nav--next{right:24px}
        .lb__nav:hover{background:#fff; color:var(--ink); border-color:#fff}
        .lb__meta{
          position:absolute; bottom:24px; left:0; right:0;
          text-align:center;
          font-size:11px; letter-spacing:.28em; text-transform:uppercase;
          color:rgba(255,255,255,.7);
          font-variant-numeric:tabular-nums;
        }

        @media (max-width:1100px){.pd-gallery{grid-template-columns:repeat(2, 1fr); gap:16px}}
        @media (max-width:1024px){
          .pd-intro{gap:48px}
          .pd-nav{gap:32px}
        }
        @media (max-width:900px){
          .pd-intro{grid-template-columns:1fr; gap:32px}
          .pd-nav{grid-template-columns:1fr}
          .pd-nav__side--next{text-align:left !important}
          .pd-hero__content{padding-bottom:60px}
          .pd-details{gap:24px; padding:24px 0}
          .pd-details__value{font-size:20px}
          .pd-mediatabs button{padding:11px 26px}
          .lb{padding:30px 20px}
          .lb__nav{width:44px; height:44px}
          .lb__nav--prev{left:10px}
          .lb__nav--next{right:10px}
        }
        @media (max-width:700px){.pd-gallery{grid-template-columns:1fr}}
        @media (max-width:600px){
          .pd-hero{min-height:520px}
          .pd-hero__content{padding-bottom:44px}
          .pd-hero__type{top:74px; left:16px}
          .pd-mediatabs{width:100%; justify-content:center}
          .pd-mediatabs button{padding:11px 0; flex:1; text-align:center}
          .pd-details{gap:20px}
          .pd-video{border-radius:2px}
          .lb{padding:20px 12px}
          .lb__note{max-width:200px; font-size:9px; top:16px; left:16px}
          .lb__close{top:14px; right:14px; width:40px; height:40px; font-size:22px}
          .lb__stage img{max-height:80vh}
        }
        @media (orientation:landscape) and (max-height:520px){
          .pd-hero{height:auto; min-height:0; aspect-ratio:16/9}
          .pd-hero__content{padding-bottom:32px}
        }
      `}</style>
    </Page>
  );
}

Object.assign(window, { PortfolioDetail, Lightbox });