https://www.homofaber.com/assets/ListLayoutBVI-CEu-I-QS.js

1import{j as s}from"./ariakit-vendor-Rr0LjWYd.js";import{r as u}from"./i18n-vendor-CgdUv56d.js";import{c as C}from"./clsx-B-dksMZM.js";import{S as G}from"./SuperLink-C47XcoJI.js";import{t as D}from"./triggerEvent-Cz4KJkb0.js";const ne=({title:f,count:r,countLabel:e,countLabelPlural:m})=>s.jsxs("div",{className:"px-4 md:px-8 pt-6 mx-auto",children:[s.jsx("h1",{className:"text-3xl md:text-4xl font-adelia mb-6 text-center",children:f}),r!=null&&s.jsxs("p",{className:"text-gray-400 text-left",children:[r," ",r>1?m:e]})]}),P=f=>{const{isActive:r,url:e,urlMobile:m,landingUrl:o,Title:c,Target:i,ContentText:t,ButtonText:l,TextColor:a,ButtonBackgroundColor:w,HorizontalAlign:g,bannerType:k="Guide",variant:R="sidebar",preferMobileImage:L=!1,preferTabletImage:v=!1,aboveFold:M=!1,urlTablet:y}=f,h=R==="embedded",n=h?L?m||e:v&&y||e:e,[d,N]=u.useState(!1),x=u.useRef(null),b=j=>{if(j===null)return;const I=1054/381,H=j.offsetWidth*I;j.style.height=`${H}px`;const z=window.innerHeight;H<z?j.style.top="81px":j.style.top=`${-12-(H-z)}px`},p=u.useRef(null),[T,B]=u.useState({width:0,height:0}),[_,q]=u.useState(0);u.useEffect(()=>{if(h)return;const j=new ResizeObserver(E=>{B({width:Math.floor(E[0].contentRect.width),height:Math.floor(E[0].contentRect.height)})});return p.current&&j.observe(p.current),()=>{p.current&&j.unobserve(p.current)}},[h,p.current]),u.useEffect(()=>{window&&q(window.innerHeight)},[]),u.useEffect(()=>{if(!d&&r){const j=x.current;if(j){const E=new IntersectionObserver(V=>{for(const I of V)I.isIntersecting&&!d&&(D("banner_impression",{banner_url:o,banner_title:c,banner_type:k}),N(!0))},{threshold:.1});return E.observe(j),()=>{E.disconnect()}}}},[d,r,k,c,o]);const O=T.height-_+20;u.useEffect(()=>{if(h)return;const j=()=>{b(x.current)};return window.addEventListener("resize",j),b(x.current),()=>window.removeEventListener("resize",j)},[h]);const F=()=>{D("banner_click",{banner_url:o,banner_title:c,banner_type:k})};return h?s.jsx("div",{ref:x,className:"relative h-full min-h-0 w-full min-w-0 overflow-hidden",children:s.jsx(G,{className:"block h-full min-h-0 w-full outline-none",href:o,target:i,onClick:F,children:s.jsxs("div",{className:"relative h-full min-h-0 w-full",children:[s.jsx("img",{ref:p,src:n,alt:(c==null?void 0:c.trim())||"Advertisement",className:"pointer-events-none absolute inset-0 h-full w-full object-cover",loading:M?"eager":"lazy",fetchPriority:M?"high":void 0}),s.jsxs("div",{className:"pointer-events-none absolute inset-0 z-[1]",children:[s.jsxs("div",{className:"flex h-full w-full flex-col items-stretch pt-[20%] max-sm:pt-[12%] min-[640px]:max-[1023px]:pt-[12%] text-center",children:[c&&s.jsx("div",{className:"w-full shrink-0 px-3 md:px-4",style:{color:a},children:s.jsx("span",{className:"line-clamp-4 font-adelia text-[22px] font-bold uppercase leading-tight tracking-tight sm:text-[26px] md:text-[28px]",children:c})}),t&&s.jsx("div",{className:"mt-3 w-full shrink-0 px-3 font-normal leading-snug sm:mt-4 md:px-4",style:{color:a},children:s.jsx("span",{className:"line-clamp-6 text-sm sm:text-base md:text-lg",children:t})})]}),l&&s.jsx("div",{className:"absolute bottom-[20%] left-1/2 z-[2] w-full max-w-[90%] -translate-x-1/2 text-center max-sm:bottom-[12%] min-[640px]:max-[1023px]:bottom-[12%]",children:s.jsx("span",{className:"inline-block border px-4 py-2 text-xs font-medium uppercase tracking-wide sm:text-sm",style:{backgroundColor:w||"transparent",color:a,borderColor:a},children:l})})]})]})})}):s.jsx("div",{ref:x,className:" mb-[7px] hidden aspect-[1/3] h-auto w-full sticky top-0 md:block",children:s.jsx(G,{className:"",href:o,target:i,onClick:F,children:s.jsx("div",{className:C("sticky lg:bottom-0 lg:self-end"),style:{top:-O},children:s.jsxs("div",{className:"relative w-full",style:{height:T.height},children:[s.jsx("img",{ref:p,src:e,alt:(c==null?void 0:c.trim())||"Advertisement",className:C("absolute left-0 top-0 w-full"),loading:"lazy"}),s.jsxs("div",{className:C("absolute left-0 top-0 flex h-full w-full flex-col items-center py-[100px] xs:text-xs sm:text-sm md:text-base lg:text-lg",g==="top"&&"justify-start",g==="bottom"&&"justify-end"),children:[c&&s.jsx("div",{className:C("px-4 text-center text-2xl font-bold xl:text-3xl 2xl:text-4xl"),style:{color:a},children:c}),t&&s.jsx("div",{className:C("mb-10 mt-2 px-4 text-center text-md xl:text-lg 2xl:text-xl"),style:{color:a},children:t}),l&&s.jsx("button",{type:"button",className:C("border-2 px-2 py-4 text-sm xl:text-md 2xl:text-lg"),style:{backgroundColor:w||"transparent",color:a,borderColor:a},children:l})]})]})})})})},A=(f,r,e,m=!0)=>{const o=u.useRef([]),c=u.useRef(null),i=u.useRef(f);return i.current=f,u.useEffect(()=>{const t=()=>{if(!e.current)return;const a=e.current.getBoundingClientRect();c.current={top:window.scrollY+a.top,height:Math.max(1,a.height)}};t();const l=new ResizeObserver(()=>{t()});return e.current?(l.observe(e.current),()=>l.disconnect()):()=>l.disconnect()},[]),u.useEffect(()=>{if(!m)return()=>{for(const n of o.current){n==null||n.classList.remove("will-change-transform"),n&&(n.style.transform="");const d=n==null?void 0:n.querySelectorAll("a");if(d)for(const N of d)N.style.transform=""}};let t=null,l=window.scrollY,a=performance.now(),w=0,g=null;

1const k=()=>o.current.map(n=>n?Array.from(n.querySelectorAll("a")):[]);let R=k();const L=n=>{for(const[d,N]of o.current.entries()){if(!N)continue;const x=i.current[d]??0;N.style.transform=`translate3d(0, ${(x*n).toFixed(2)}px, 0)`}},v=n=>{for(const d of R)for(const N of d)N.style.transform=`skewY(${n.toFixed(3)}deg)`},M=n=>{for(const d of o.current)d&&(n?d.classList.add("will-change-transform"):d.classList.remove("will-change-transform"))},y=()=>{if(!e.current){t=requestAnimationFrame(y);return}const d=performance.now(),N=Math.max(16,d-a),x=window.scrollY,b=(x-l)/N*1e3;l=x,a=d,w+=(b-w)*.2;const p=Math.max(-r,Math.min(r,w*.003)),T=c.current;if(!T){t=requestAnimationFrame(y);return}const B=(window.scrollY-T.top)/T.height,_=Math.max(0,Math.min(1,B));L(_),v(p),M(!0),g&&clearTimeout(g),g=setTimeout(()=>{M(!1),v(0)},180),t=requestAnimationFrame(y)},h=new MutationObserver(()=>{R=k()});return e.current&&h.observe(e.current,{childList:!0,subtree:!0}),t=requestAnimationFrame(y),()=>{h.disconnect(),t!==null&&cancelAnimationFrame(t),g&&clearTimeout(g),M(!1);for(const n of o.current)n&&(n.style.transform="");for(const n of R)for(const d of n)d.style.transform=""}},[r,m]),o},U=3,$=2;function W(f,r,e,m){const o=Array.from({length:r},()=>[]),c=Array.from({length:r},(i,t)=>e!==null&&t===e?m:0);for(const i of f){let t=0;for(let l=1;l<r;l++){const a=o[l].length+c[l],w=o[t].length+c[t];(a<w||a===w&&l<t)&&(t=l)}o[t].push(i)}return o}function Q({mainAdvert:f,size:r,smGridTopRight:e}){const m="shrink-0 w-full min-h-0 min-w-0 overflow-hidden rounded-sm",o=r==="4col-3rows"?"aspect-[1/2]":r==="3col-2rows"?"aspect-[3/4]":"aspect-[3/2]",c=e===!0?"max-sm:order-first sm:order-none sm:col-start-2 sm:row-start-1":"";return s.jsx("div",{className:`${m} ${o} ${c}`,"data-main-advert-slot":!0,children:s.jsx("div",{className:"box-border h-full min-h-0 w-full min-w-0 p-1.25",children:s.jsx(P,{...f,type:"desktop",variant:"embedded",preferMobileImage:r==="1card",preferTabletImage:r==="3col-2rows",aboveFold:r!=="1card"})})})}function S(f,r,e){return f?s.jsx(Q,{mainAdvert:f,size:r,smGridTopRight:e==null?void 0:e.smGridTopRight}):null}function Y(){const[f,r]=u.useState("both");return u.useEffect(()=>{const e=window.matchMedia("(min-width: 1024px)"),m=window.matchMedia("(min-width: 1536px)"),o=()=>{if(!e.matches){r("mobile");return}r(m.matches?"desktop4":"desktop3")};return o(),e.addEventListener("change",o),m.addEventListener("change",o),()=>{e.removeEventListener("change",o),m.removeEventListener("change",o)}},[]),f}function J({items:f,renderItem:r,mainAdvert:e,enableParallax:m,listReady:o=!0,pagination:c,speeds:i}){const t=Y(),l=t==="both"||t==="desktop3",a=t==="both"||t==="desktop4",w=t==="both"||t==="mobile",g=u.useRef(null),k=u.useRef(null),R=A([i.speed1,i.speed2,i.speed3],i.maxSkew,g,m&&t==="desktop3"),L=A([i.speed1,i.speed2,i.speed3,i.speed4],i.maxSkew,k,m&&t==="desktop4"),v=e?2:null,M=e?$:0,y=e?3:null,h=e?U:0,n=f.map((x,b)=>({item:x,index:b+1})),d=W(n,3,v,M),N=W(n,4,y,h);return s.jsxs("div",{className:`transition-opacity duration-100 ${o?"opacity-100":"opacity-0"}`,children:[l?s.jsx("div",{ref:g,className:t==="both"?"hidden gap-1 lg:flex 2xl:hidden":"flex gap-1",children:d.map((x,b)=>s.jsxs("div",{ref:p=>{R.current[b]=p},className:"flex flex-1 flex-col gap-1",children:[b===2&&S(e,"3col-2rows"),x.map(({item:p,index:T})=>r(p,T))]},b))}):null,a?s.jsx("div",{ref:k,className:t==="both"?"hidden 2xl:flex gap-1":"flex gap-1",children:N.map((x,b)=>s.jsxs("div",{ref:p=>{L.current[b]=p},className:"flex flex-1 flex-col gap-1",children:[b===3&&S(e,"4col-3rows"),x.map(({item:p,index:T})=>r(p,T))]},b))}):null,w?s.jsxs("div",{className:t==="both"?"grid grid-cols-1 gap-1 sm:grid-cols-2 lg:hidden":"grid grid-cols-1 gap-1 sm:grid-cols-2",children:[n[0]?r(n[0].item,n[0].index):null,S(e,"1card",{smGridTopRight:!0}),n.slice(1).map(({item:x,index:b})=>r(x,b))]}):null,c]})}function K({items:f,renderItem:r,mainAdvert:e,enableParallax:m,listReady:o=!0,pagination:c,speeds:i}){const t=Y(),l=t==="desktop3"||t==="desktop4",a=t==="both"||l,w=t==="both"||t==="mobile",g=u.useRef(null),k=A([i.speed1,i.speed2,i.speed3],i.maxSkew,g,m&&l),R=e?2:null,L=e?$:0,v=f.map((y,h)=>({item:y,index:h+1})),M=W(v,3,R,L);return s.jsxs("div",{className:`transition-opacity duration-100 ${o?"opacity-100":"opacity-0"}`,children:[a?s.jsx("div",{ref:g,className:t==="both"?"hidden gap-1 lg:flex":"flex gap-1",children:M.map((y,h)=>s.jsxs("div",{ref:n=>{k.current[h]=n},className:"flex flex-1 flex-col gap-1",children:[h===2&&S(e,"3col-2rows"),y.map(({item:n,index:d})=>r(n,d))]},h))}):null,w?s.jsxs("div",{className:t==="both"?"grid grid-cols-1 gap-1 sm:grid-cols-2 lg:hidden":"grid grid-cols-1 gap-1 sm:grid-cols-2",children:[v[0]?r(v[0].item,v[0].index):null,S(e,"1card",{smGridTopRight:!0}),v.slice(1).map(({item:y,index:h})=>r(y,h))]}):null,c]})}const oe=u.memo(function({items:r,renderItem:e,maxCols:m,mainAdvert:o,listReady:c=!0,pagination:i}){const[l,a]=u.useState([-50,-120,-220,-350]);u.useEffect(()=>{a([...[-50,-120,-220,-350,-480]].sort(()=>Math.random()-.5).slice(0,4))},[]);const w=l[0]??-50,g=l[1]??-120,k=l[2]??-220,R=l[3]??-350,v={speed1:w,speed2:g,speed3:k,speed4:R,maxSkew:.5};return m===4?s.jsx(J,{items:r,renderItem:e,mainAdvert:o,enableParallax:!0,listReady:c,pagination:i,speeds:v}):s.jsx(K,{items:r,renderItem:e,mainAdvert:o,enableParallax:!0,listReady:c,pagination:i,speeds:v})});

1export{ne as B,oe as L};