https://shakila.com/assets/MusicVideos-C4fXyLTe.js

1import{C as e,S as t,a as n,f as r,g as i,i as a,m as o}from"./index-DupAZtBc.js";var s=e(t(),1),c=i(),l=[`All`,`Persian`,`International`];function u({limit:e,showFilters:t=!0,showViewAll:i=!0}={}){let[u,d]=(0,s.useState)(null),[f,p]=(0,s.useState)(`All`),m=u?n.find(e=>e.youtubeId===u)??null:null;(0,s.useEffect)(()=>{if(!u)return;let e=e=>{e.key===`Escape`&&d(null)};document.addEventListener(`keydown`,e);let t=document.body.style.overflow;return document.body.style.overflow=`hidden`,()=>{document.removeEventListener(`keydown`,e),document.body.style.overflow=t}},[u]);let h=n.filter(e=>a(e.language,f)),g=e?h.slice(0,e):h;return(0,c.jsxs)(`section`,{id:`videos`,className:`py-12 md:py-16 px-6 bg-paper text-charcoal`,children:[(0,c.jsxs)(`div`,{className:`max-w-6xl mx-auto`,children:[(0,c.jsxs)(`div`,{className:`grid grid-cols-[minmax(0,1fr)_auto] items-end gap-6 mb-6 md:mb-8`,children:[(0,c.jsx)(`div`,{className:`min-w-0`,children:(0,c.jsx)(`h2`,{className:`text-gold text-[10px] font-semibold tracking-[0.3em] uppercase mb-4 block`,children:`Music Videos`})}),i&&(0,c.jsx)(o,{to:`/videos`,className:`text-[10px] uppercase tracking-[0.22em] text-charcoal/70 whitespace-nowrap shrink-0 border-b border-charcoal/30 pb-1 hover:text-charcoal hover:border-charcoal transition-colors`,children:`View All`})]}),t&&(0,c.jsx)(`div`,{className:`flex flex-wrap items-center gap-2 mb-6 md:mb-8`,children:l.map((e,t)=>(0,c.jsxs)(`div`,{className:`flex items-center gap-2`,children:[t>0&&(0,c.jsx)(`span`,{className:`text-charcoal/30 text-xs`,children:`|`}),(0,c.jsx)(`button`,{type:`button`,onClick:()=>p(e),className:`text-[10px] uppercase tracking-[0.22em] pb-1 border-b transition-colors ${f===e?`text-charcoal border-charcoal`:`text-charcoal/65 border-transparent hover:text-charcoal`}`,children:e})]},e))}),g.length===0?(0,c.jsx)(`p`,{className:`text-charcoal/60 text-sm`,children:`No videos in this category yet.`}):(0,c.jsx)(`div`,{className:`grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 md:gap-10`,children:g.map(e=>(0,c.jsxs)(`button`,{type:`button`,onClick:()=>d(e.youtubeId),className:`group block text-left focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-gold`,children:[(0,c.jsxs)(`div`,{className:`relative aspect-video bg-charcoal/5 outline-1 -outline-offset-1 outline-charcoal/10 mb-5 overflow-hidden`,children:[(0,c.jsx)(`img`,{src:r(e.youtubeId),alt:`Shakila - ${e.title} official music video thumbnail`,loading:`lazy`,width:1280,height:720,onError:t=>{let n=t.currentTarget;n.dataset.fallback||(n.dataset.fallback=`1`,n.src=`https://i.ytimg.com/vi/${e.youtubeId}/mqdefault.jpg`)},className:`w-full h-full object-cover transition-transform duration-700 group-hover:scale-[1.04]`}),(0,c.jsx)(`div`,{className:`absolute inset-0 flex items-center justify-center bg-charcoal/0 group-hover:bg-charcoal/30 transition-colors`,children:(0,c.jsx)(`span`,{className:`opacity-0 group-hover:opacity-100 transition-opacity w-14 h-14 rounded-full bg-paper/95 text-charcoal flex items-center justify-center shadow-lg`,children:(0,c.jsx)(`svg`,{width:`18`,height:`20`,viewBox:`0 0 18 20`,fill:`currentColor`,"aria-hidden":`true`,children:(0,c.jsx)(`path`,{d:`M0 0v20l18-10L0 0z`})})})})]}),(0,c.jsx)(`h3`,{className:`font-serif text-xl mb-1 group-hover:text-gold transition-colors`,children:e.title}),(0,c.jsxs)(`p`,{className:`text-[10px] uppercase tracking-[0.2em] text-charcoal/65`,children:[e.subtitle,` · `,e.year]})]},e.youtubeId))})]}),m&&(0,c.jsx)(`div`,{className:`fixed inset-0 z-[100] bg-charcoal/90 backdrop-blur-sm flex items-center justify-center p-4 md:p-8 animate-in fade-in duration-200`,onClick:()=>d(null),role:`dialog`,"aria-modal":`true`,"aria-label":m.title,children:(0,c.jsxs)(`div`,{className:`relative w-full max-w-5xl`,onClick:e=>e.stopPropagation(),children:[(0,c.jsxs)(`button`,{type:`button`,onClick:()=>d(null),"aria-label":`Close video`,className:`absolute -top-12 right-0 text-paper/80 hover:text-gold text-[10px] uppercase tracking-[0.22em] flex items-center gap-2`,children:[`Close`,(0,c.jsx)(`span`,{"aria-hidden":`true`,className:`text-lg leading-none`,children:`×`})]}),(0,c.jsx)(`div`,{className:`aspect-video w-full bg-black shadow-2xl`,children:(0,c.jsx)(`iframe`,{src:`https://www.youtube-nocookie.com/embed/${m.y

1outubeId}?autoplay=1&rel=0&modestbranding=1`,title:m.title,allow:`accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share`,allowFullScreen:!0,className:`w-full h-full`},m.youtubeId)}),(0,c.jsxs)(`div`,{className:`mt-4 text-paper`,children:[(0,c.jsx)(`h3`,{className:`font-serif text-2xl`,children:m.title}),(0,c.jsxs)(`p`,{className:`text-[10px] uppercase tracking-[0.22em] text-paper/60 mt-1`,children:[m.subtitle,` · `,m.year]})]})]})})]})}export{u as t};