https://terabitit.com/assets/ProjectDiaries-CrB0b7nO.js

1import{j as e}from"./index-BHKWHNqP.js";import{b as s,R as b}from"./vendor-react-DTF1y61S.js";import{Y as N}from"./YouTube.esm-CkLHxa9Y.js";import"./vendor-icons-Bx5hBfGb.js";const S=({videoId:o,title:r="Project diary video",onVideoPlay:c,registerPlayer:u})=>{const[a,m]=s.useState(!0),[n,v]=s.useState(!1),g=`https://img.youtube.com/vi/${o}/hqdefault.jpg`,h={width:"100%",height:"100%",playerVars:{autoplay:1}},w=t=>{u(o,t.target)},f=()=>{c(o)},p=t=>{(t.data===1||t.data===2)&&m(!1)},x=()=>{v(!0)};return n?e.jsxs("div",{className:"relative w-full h-full overflow-hidden rounded-lg",children:[a&&e.jsx("div",{className:"absolute inset-0",children:e.jsx("div",{className:"shimmer w-full h-full"})}),e.jsx(N,{videoId:o,opts:h,onReady:w,onPlay:f,onStateChange:p,iframeClassName:"absolute top-0 left-0 h-full w-full object-cover"})]}):e.jsx("div",{className:"relative w-full h-full overflow-hidden rounded-lg",children:e.jsxs("button",{onClick:x,className:"relative w-full h-full bg-black cursor-pointer group","aria-label":`Play ${r}`,children:[e.jsx("img",{src:g,alt:r,className:"w-full h-full object-cover",loading:"lazy"}),e.jsx("div",{className:"absolute inset-0 flex items-center justify-center",children:e.jsx("div",{className:"w-14 h-14 md:w-16 md:h-16 bg-red-600 rounded-full flex items-center justify-center group-hover:bg-red-700 transition-colors",children:e.jsx("svg",{className:"w-7 h-7 md:w-8 md:h-8 text-white ml-1",fill:"currentColor",viewBox:"0 0 24 24","aria-hidden":"true",children:e.jsx("path",{d:"M8 5v14l11-7z"})})})})]})})};function P({count:o,currentIndex:r,setCurrentIndex:c}){const u=s.useRef(null),a=o>5?"max-w-[200px]":"max-w-none";return e.jsx("div",{className:"flex justify-center items-center mt-4 lg:hidden",children:e.jsx("div",{ref:u,className:`flex gap-2 items-center overflow-x-auto scrollbar-hide ${a}`,children:Array.from({length:o}).map((m,n)=>e.jsx("button",{onClick:()=>c(n),"aria-label":`Go to slide ${n+1}`,"aria-current":r===n?"true":void 0,className:"min-w-[24px] min-h-[24px] flex items-center justify-center flex-shrink-0",children:e.jsx("span",{className:`block transition-all duration-300 rounded-full ${r===n?"w-6 h-2 bg-[#008DF3]":"w-2 h-2 bg-gray-300"}`})},n))})})}const k=({children:o,slideWidth:r=390,slideHeight:c=260,slidesPerView:u=3,gap:a=5,autoSlideInterval:m=2e3})=>{const[n,v]=s.useState(0),[g,h]=s.useState(!1),[w,f]=s.useState(!1),p=s.useRef(null),x=b.Children.toArray(o),t=x.length,d=r*u+a*(u-1),y=l=>{const i=p.current;i&&(i.scrollTo({left:l*(r+a),behavior:"smooth"}),v(l))};return s.useEffect(()=>{const l=p.current;if(!l)return;const i=()=>{const j=Math.round(l.scrollLeft/(r+a));j!==n&&j>=0&&j<t&&v(j)};return l.addEventListener("scroll",i,{passive:!0}),()=>l.removeEventListener("scroll",i)},[n,t,r,a]),s.useEffect(()=>{if(g||w)return;const l=setInterval(()=>{const i=(n+1)%t;y(i)},m);return()=>clearInterval(l)},[g,w,n,t,m]),e.jsxs("div",{style:{width:d},className:"relative",onMouseEnter:()=>h(!0),onMouseLeave:()=>h(!1),children:[e.jsx("div",{ref:p,className:"flex overflow-x-auto scroll-smooth scrollbar-hide",style:{height:c,scrollSnapType:"x mandatory",gap:a},onTouchStart:()=>f(!0),onTouchEnd:()=>f(!1),children:x.map((l,i)=>e.jsx("div",{className:"flex-shrink-0",style:{width:r,height:c,scrollSnapAlign:"start"},children:l},i))}),e.jsx(P,{count:t,currentIndex:n,setCurrentIndex:y})]})};function T(){const o=["P66Hyek_xeM","P1wyFZNtmTg","SUO9alytpd8","IJXm8u2zUMg","33SRvZBMMc0"],r=s.useRef({}),[c,u]=s.useState(null),a=s.useRef(null),m=(t,d)=>{r.current[t]=d},n=t=>{if(c&&c!==t){const d=r.current[c];d&&d.pauseVideo()}u(t),a.current&&a.current.slickPause()},v=t=>{c===t&&(u(null),a.current&&a.current.slickPlay())},[g,h]=s.useState(1),[w,f]=s.useState(380),[p,x]=s.useState(200);return s.useEffect(()=>{const t=()=>{let d=16;window.innerWidth>=1024?d=95:window.innerWidth>=768?d=48:window.innerWidth>=640&&(d=32);const l=Math.min(1440,window.innerWidth)-d*2,i=12;window.innerWidth<768?(h(1),f(Math.min(l,400)),x(220)):window.innerWidth<1024?(h(2),f((l-i)/2),x(240)):(h(3),f((l-i*2)/3),x(260))};return window.addEventListener("resize",t,{passive:!0}),t(),()=>window.removeEventListener("resize",t)},[]),e.jsx("div",{className:"w-full max-w-[1440px] mx-auto px-4 sm:px-8 md:px-12 lg:px-[95px] min-h-[450px] flex justify-center ",children:e.jsxs("div",{className:"w-full  flex flex-col justify-center items-center gap-2 ",children:[e.jsx("h1",{className:"text-[#1D2939] font-outfit font-[600] text-3xl md:text-4xl leading-tight tracking-[-2%] text-center",children:"Project Diaries"}),e.jsx("p",{className:"font-proxima font-[400] max-w-[546px] text-[#1D2939] text-center text-[16px] leading-6 px-4",children:"Take a behind-the-scenes look at how we work, tackle challenges, and turn ideas into real solutions to deliver the best for our clients"}),e.jsx("div",{className:"mt-5 w-full flex items-center justify-center",children:e.jsx(k,{slideWidth:w,slideHeight:p,slidesPerView:g,gap:12,autoSlideInterval:5e3,children:o.map(t=>e.jsx("div",{className:"px-1",children:e.jsx("div",{className:"rounded-[21px] overflow-hidden w-full",style:{height:`${Math.round(w*.56)}px`},children:e.jsx(S,{videoId:t,onVideoPlay:n,onVideoPause:v,registerPlayer:m})})},t))})})]})})}export{T as default};