PageSourceSearch

https://mega-foodsusa.web.app/assets/RecipeDetailPage-Dmt_nC2u.js

js mega-foodsusa.web.app collected 2026-10-03 12:29:40 UTC 22,611 bytes, 51 lines download raw bytes

1import{m as ue,u as xe,r,k as te,d as E,j as e,H as fe,L as he,q as ge,c as be,w as se,l as ye,n as we,i as ve}from"./index-D0AdDj_t.js";import{u as je,N as F,F as R,C as ae}from"./Navbar-Criq0Bqu.js";import{g as re,a as Ne,b as ke}from"./translationService-Caya5Hu3.js";import{u as Ce}from"./useFamilies-Cnwz0azo.js";import{u as Te}from"./useTranslation-ButTyvna.js";import{A as Ie}from"./arrow-left-CKVarNHT.js";import{F as Se}from"./flame-DZro7DTX.js";import{C as ze}from"./clock-COJ2Siht.js";import{U as De}from"./users-BzOj3qcp.js";import{C as Le}from"./circle-check-D-b_q8Ps.js";import{A as B}from"./index-CRaRV5tC.js";import{m as T}from"./proxy-BdcPKS2s.js";import{C as Me}from"./chef-hat-BWvXqIF3.js";import{X as Pe}from"./x-CHfbNtWw.js";import{C as Ue,a as $e}from"./chevron-right-CCuQjMqI.js";import"./megafoodslogo-BAKShzxV.js";import"./utils-CR_THIQe.js";import"./createLucideIcon-C0BP4cie.js";import"./index-JjVzXClB.js";const Ee=`
2  @keyframes rdp-fade-up {
3    from { opacity: 0; transform: translateY(24px); }
4    to   { opacity: 1; transform: translateY(0); }
5  }
6  @keyframes rdp-fade-in {
7    from { opacity: 0; }
8    to   { opacity: 1; }
9  }
10  @keyframes rdp-zoom-in {
11    from { opacity: 0; transform: scale(0.93); }
12    to   { opacity: 1; transform: scale(1); }
13  }
14
15  /* Blob drift */
16  @keyframes rdp-blob-drift {
17    0%, 100% { transform: translate(0px, 0px) scale(1); }
18    25%       { transform: translate(40px, -30px) scale(1.1); }
19    50%       { transform: translate(-20px, 20px) scale(0.92); }
20    75%       { transform: translate(30px, 10px) scale(1.05); }
21  }
22  .rdp-blob-1 { animation: rdp-blob-drift 10s ease-in-out infinite; }
23  .rdp-blob-2 { animation: rdp-blob-drift 13s ease-in-out infinite reverse 2s; }
24  .rdp-blob-3 { animation: rdp-blob-drift 17s ease-in-out infinite 5s; }
25
26  /* Wave scroll — translateX on 200%-wide SVG */
27  @keyframes rdp-wave-1 { from { transform: translateX(0); } to { transform: translateX(-50%); } }
28  @keyframes rdp-wave-2 { from { transform: translateX(-50%); } to { transform: translateX(0); } }
29  @keyframes rdp-wave-3 { from { transform: translateX(0); } to { transform: translateX(-50%); } }
30  .rdp-wave-1 { animation: rdp-wave-1 4s linear infinite; }
31  .rdp-wave-2 { animation: rdp-wave-2 6s linear infinite; }
32  .rdp-wave-3 { animation: rdp-wave-3 9s linear infinite; }
33
34  /* Bubbles */
35  @keyframes rdp-bubble-rise {
36    0%   { transform: translateY(0) scale(1);    opacity: 0; }
37    8%   { opacity: 1; }
38    85%  { opacity: 0.7; }
39    100% { transform: translateY(-90vh) scale(1.4); opacity: 0; }
40  }
41  @keyframes rdp-bubble-sway {
42    0%, 100% { margin-left: 0; }
43    50%       { margin-left: 18px; }
44  }
45  .rdp-bubble      { animation: rdp-bubble-rise var(--dur, 8s) ease-in infinite var(--delay, 0s); }
46  .rdp-bubble-sway { animation: rdp-bubble-sway var(--sway, 3s) ease-in-out infinite; }
47
48  .rdp-fade-up  { animation: rdp-fade-up  0.55s cubic-bezier(.22,1,.36,1) both; }
49  .rdp-fade-in  { animation: rdp-fade-in  0.4s ease both; }
50  .rdp-zoom-in  { animation: rdp-zoom-in  0.3s cubic-bezier(.22,1,.36,1) both; }
51`,Fe={easy:"bg-emerald-500",medium:"bg-amber-500",hard:"bg-red-400"};function Re(){const[i,m]=r.useState(!1);return r.useEffect(()=>{m(!0)},[]),i}function Be(i){const m=/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=|shorts\/)([^#&?]*).*/,d=i.match(m);return d&&d[2].length===11?d[2]:null}function Ae(i){const m=i.match(/tiktok\.com\/@[^/]+\/video\/(\d+)/);return m?m[1]:null}function it(){const{t:i,i18n:m}=Te(),d=m.language?.split("-")[0]??"en",{id:w}=ue(),A=xe(),[a,O]=r.useState(null),[le,ie]=r.useState(!0);je(a?`${a.title} — Mega Foods`:void 0);const[I,S]=r.useState(null),[oe,X]=r.useState(null),[Y,H]=r.useState(null),[ne,q]=r.useState(null),[ce,V]=r.useState(null),[v,Z]=r.useState("ingredients"),[u,G]=r.useState(0),[_,j]=r.useState(!1),[z,de]=r.useState(0),[D,W]=r.useState(!1),[f,N]=r.useState(0),{families:J}=Ce(),c=Re(),h=r.useMemo(()=>a?.familyId?J.find(t=>t.id===a.familyId):null,[a?.familyId,J]),o=h?.brandColor||"#D62027",g=h?.desktopBannerUrl,L=h?.mobileBannerUrl,k=!!(g||L);r.useEffect(()=>{async function t(){if(w)try{const s=ge(be(E,"recipes"),se("slug","==",w),se("published","==",!0),ye(1)),l=await we(s);
51if(l.empty){const x=await ve(te(E,"recipes",w));x.exists()?O({...x.data(),id:x.id}):S("recipes.error.notFound")}else{const x=l.docs[0],y=x.data();y.published?O({...y,id:x.id}):S("recipes.error.notPublished")}}catch{S("recipes.error.loading")}finally{ie(!1)}}t()},[w]),r.useEffect(()=>{if(!a||(X(null),H(null),q(null),V(null),d==="en"))return;const t=te(E,"recipes",a.id),s=a;(async()=>{try{const[l,x,y,ee]=await Promise.all([re(s,t,"title",d),re(s,t,"description",d),Ne(s,t,"steps",d),ke(s,t,d)]);X(l),H(x),q(y.length>0?y:null),V(ee.length>0?ee:null)}catch(l){console.error("[RecipeDetailPage] Translation failed, falling back to originals:",l)}})()},[a,d]);const pe=r.useMemo(()=>a?.tags?typeof a.tags=="string"?a.tags.split(",").map(t=>t.trim()).filter(Boolean):Array.isArray(a.tags)?a.tags:[]:[],[a?.tags]),n=r.useMemo(()=>{if(!a)return[];const t=[];return a.imageUrl&&t.push(a.imageUrl),a.visualImageUrl&&a.visualImageUrl!==a.imageUrl&&t.push(a.visualImageUrl),a.galleryUrls?.forEach(s=>{s&&!t.includes(s)&&t.push(s)}),t},[a]),M=r.useMemo(()=>a?Be(a.youtubeUrl||""):null,[a]),P=r.useMemo(()=>a?Ae(a.tiktokUrl||""):null,[a]),p=r.useMemo(()=>n.map(t=>({type:"image",url:t})),[n]),b=r.useMemo(()=>[...M?[{type:"youtube",youtubeId:M}]:[],...P?[{type:"tiktok",tiktokId:P}]:[]],[M,P]);r.useEffect(()=>{if(p.length<=1||_)return;const t=setInterval(()=>G(s=>(s+1)%p.length),3500);return()=>clearInterval(t)},[p,_]);const K=r.useCallback(t=>{G(t),j(!0),setTimeout(()=>j(!1),6e3)},[]),me=r.useCallback(t=>{N(t),W(!0),j(!0),document.body.style.overflow="hidden"},[]),C=r.useCallback(()=>{W(!1),j(!1),document.body.style.overflow=""},[]),U=r.useCallback(()=>N(t=>(t-1+n.length)%n.length),[n.length]),$=r.useCallback(()=>N(t=>(t+1)%n.length),[n.length]);if(r.useEffect(()=>{if(!D)return;const t=s=>{s.key==="Escape"&&C(),s.key==="ArrowLeft"&&U(),s.key==="ArrowRight"&&$()};return window.addEventListener("keydown",t),()=>window.removeEventListener("keydown",t)},[D,C,U,$]),le)return e.jsxs("div",{className:"min-h-screen flex flex-col bg-white w-full",children:[e.jsx(F,{}),e.jsx("div",{className:"flex-1 flex items-center justify-center",children:e.jsx("div",{className:"w-10 h-10 border-4 border-t-transparent rounded-full animate-spin",style:{borderColor:o,borderTopColor:"transparent"}})}),e.jsx(R,{})]});if(I||!a)return e.jsxs("div",{className:"min-h-screen flex flex-col bg-white w-full",children:[e.jsx(F,{}),e.jsxs("div",{className:"flex-1 flex flex-col items-center justify-center text-center px-6",children:[e.jsx("h1",{className:"text-3xl font-black text-gray-900 uppercase tracking-tighter",children:"Error"}),e.jsx("p",{className:"text-gray-500 mt-2 font-medium",children:i(I||"recipes.error.notFound")}),e.jsx("button",{onClick:()=>A("/recipes"),className:"mt-8 px-8 py-3 text-white rounded-full font-bold transition-all shadow-lg",style:{backgroundColor:o},children:i("recipes.backToRecipes")})]}),e.jsx(R,{})]});const Q=a.imageUrl||a.visualImageUrl;return e.jsxs("div",{className:"min-h-screen flex flex-col bg-white text-slate-900 w-full overflow-x-hidden",children:[e.jsx("style",{children:Ee}),e.jsx(F,{}),e.jsx(fe,{children:e.jsx("meta",{name:"description",content:Y??a.description})}),e.jsxs("section",{className:"relative w-full pt-20 overflow-hidden",style:{backgroundColor:o,minHeight:"52vh"},children:[k&&e.jsxs(e.Fragment,{children:[g&&e.jsx("img",{src:g,alt:"","aria-hidden":"true",className:"hidden md:block absolute inset-0 w-full h-full object-cover object-center pointer-events-none"}),(L||g)&&e.jsx("img",{src:L||g,alt:"","aria-hidden":"true",className:"md:hidden absolute inset-0 w-full h-full object-cover object-center pointer-events-none"})]}),!k&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"rdp-blob-1 absolute -top-32 -left-32 w-[480px] h-[480px] rounded-full opacity-[0.16] blur-3xl bg-white pointer-events-none"}),e.jsx("div",{className:"rdp-blob-2 absolute -top-10 right-0 w-80 h-80 rounded-full opacity-[0.10] blur-2xl bg-white pointer-events-none"}),e.jsx("div",{className:"rdp-blob-3 absolute bottom-10 left-1/2 w-64 h-64 rounded-full opacity-[0.10] blur-2xl bg-black pointer-events-none"})]}
51),!k&&[{left:"4%",bottom:"8%",size:14,dur:"7s",delay:"0s",sway:"2.5s",op:.28},{left:"13%",bottom:"25%",size:9,dur:"9s",delay:"1.3s",sway:"3.5s",op:.2},{left:"24%",bottom:"6%",size:20,dur:"6s",delay:"0.5s",sway:"2s",op:.24},{left:"36%",bottom:"40%",size:7,dur:"11s",delay:"2s",sway:"4s",op:.16},{left:"47%",bottom:"12%",size:13,dur:"8s",delay:"0.8s",sway:"3s",op:.22},{left:"58%",bottom:"30%",size:22,dur:"7.5s",delay:"3.2s",sway:"2.8s",op:.18},{left:"68%",bottom:"5%",size:10,dur:"10s",delay:"1.5s",sway:"3.5s",op:.2},{left:"78%",bottom:"20%",size:17,dur:"6.5s",delay:"0.3s",sway:"2.2s",op:.24},{left:"88%",bottom:"35%",size:8,dur:"9.5s",delay:"2.5s",sway:"4.5s",op:.18},{left:"95%",bottom:"10%",size:19,dur:"8.5s",delay:"1s",sway:"3s",op:.2}].map((t,s)=>e.jsx("div",{className:"rdp-bubble absolute pointer-events-none",style:{left:t.left,bottom:t.bottom,"--dur":t.dur,"--delay":t.delay},children:e.jsx("div",{className:"rdp-bubble-sway rounded-full border-2 border-white",style:{width:t.size,height:t.size,opacity:t.op,"--sway":t.sway,backgroundColor:"rgba(255,255,255,0.15)"}})},s)),e.jsx("div",{className:`absolute inset-0 pointer-events-none ${k?"opacity-[0.03]":"opacity-[0.05]"}`,style:{backgroundImage:"repeating-linear-gradient(-45deg, #fff, #fff 1.5px, transparent 1.5px, transparent 22px)"}}),e.jsxs("div",{className:"relative z-20 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-2 pb-6",children:[e.jsxs("button",{onClick:()=>A("/recipes"),className:"rdp-fade-up flex items-center gap-2 text-white/60 hover:text-white transition-colors group mb-3",style:{animationDelay:"0.05s",opacity:c?void 0:0},children:[e.jsx(Ie,{className:"w-4 h-4 transition-transform group-hover:-translate-x-1"}),e.jsx("span",{className:"text-[11px] font-black uppercase tracking-widest",children:i("recipes.backToRecipes")})]}),e.jsxs("div",{className:"flex flex-col text-white max-w-3xl",children:[(h?.logoUrl||Q)&&e.jsx("div",{className:"rdp-fade-in mb-3",style:{animationDelay:"0.05s",opacity:c?void 0:0},children:e.jsx("img",{src:h?.logoUrl||Q,alt:h?.name||a.title,className:"h-20 md:h-24 w-auto object-contain"})}),e.jsxs("div",{className:"rdp-fade-up flex flex-wrap gap-2 mb-5",style:{animationDelay:"0.1s",opacity:c?void 0:0},children:[pe.map((t,s)=>e.jsxs("span",{className:"bg-white/15 backdrop-blur-sm text-white/90 text-[9px] font-black tracking-widest uppercase px-3 py-1.5 rounded-full border border-white/20",children:["#",t]},s)),e.jsxs("span",{className:`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[9px] font-black uppercase tracking-wider text-white shadow-lg ${Fe[a.difficulty]}`,children:[e.jsx(Se,{className:"w-3 h-3"}),i(`recipes.difficulty.${a.difficulty}`)]})]}),e.jsx("h1",{className:"rdp-fade-up text-4xl md:text-6xl lg:text-7xl font-black uppercase tracking-tighter leading-[0.88] mb-5 drop-shadow-sm",style:{animationDelay:"0.16s",opacity:c?void 0:0},children:oe??a.title}),e.jsx("div",{className:"rdp-fade-up w-12 h-1 bg-white/40 rounded-full mb-5",style:{animationDelay:"0.22s",opacity:c?void 0:0}}),e.jsxs("div",{className:"rdp-fade-up flex flex-wrap items-center gap-6",style:{animationDelay:"0.26s",opacity:c?void 0:0},children:[e.jsxs("div",{className:"flex items-center gap-2 text-white/80",children:[e.jsx(ze,{className:"w-4 h-4"}),e.jsxs("span",{className:"text-sm font-bold",children:[a.prepTime," ",i("recipes.prepTime")]})]}),e.jsxs("div",{className:"flex items-center gap-2 text-white/80",children:[e.jsx(De,{className:"w-4 h-4"}),e.jsxs("span",{className:"text-sm font-bold",children:[a.servings," ",i("recipes.servings")]})]})]})]})]}),e.jsxs("div",{className:"relative z-10 w-full overflow-hidden pointer-events-none",style:{height:"90px",marginBottom:"-2px"},children:[e.jsx("div",{className:"rdp-wave-3 absolute top-0 left-0 h-full",style:{width:"200%"},children:e.jsx("svg",{viewBox:"0 0 2880 90",preserveAspectRatio:"none",className:"w-full h-full",xmlns:"http://www.w3.org/2000/svg",children:e.jsx("path",{d:"M0,30 C180,70 360,10 540,45 C720,80 900,15 1080,50 C1260,85 1440,20 1620,55 C1800,85 1980,25 2160,55 C2340,85 2520,30 2700,50 C2760,55 2820,40 2880,30 L2880,90 L0,90 Z",fill:"white",fillOpacity:"0.3"})})}),e.jsx("div",{className:"rdp-wave-2 absolute top-0 left-0 h-full",style:{width:"200%"},children:e.jsx("svg",{viewBox:"0 0 2880 90",preserveAspectRatio:"none",className:"w-full h-full",xmlns:"http://www.w3.org/2000/svg",children:e.jsx("path",{d:"M0,50 C200,10 400,80 600,40 C800,0 1000,70 1200,35 C1400,0 1600,65 1800,30 C2000,0 2200,60 2400,30 C2560,10 2720,70 2880,50 L2880,90 L0,90 Z",fill:"white",fillOpacity:"0.55"})})}),e.jsx("div",{className:"rdp-wave-1 absolute top-0 left-0 h-full",style:{width:"200%"},children:e.jsx("svg",{viewBox:"0 0 2880 90",preserveAspectRatio:"none",className:"w-full h-full",xmlns:"http://www.w3.org/2000/svg",children:e.jsx("path",{d:"M0,60 C240,20 480,90 720,50 C960,10 1200,80 1440,45 C1680,10 1920,75 2160,40 C2400,10 2640,65 2880,60 L2880,90 L0,90 Z",fill:"white"})})})]})]}),e.jsx("main",{className:"flex-1",children:e.jsx("section",{className:"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10 lg:py-16",children:e.jsxs("div",{className:"grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-start",children:[e.jsxs("div",{className:"order-2 lg:order-1 flex flex-col gap-6",children:[b.length>0&&e.jsxs("div",{className:"rdp-fade-in flex flex-col gap-3",style:{animationDelay:"0.28s",opacity:c?void 0:0},children:[b.length>1&&e.jsx("div",{className:"flex gap-2",children:b.map((t,s)=>e.jsx("button",{onClick:()=>de(s),className:"flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[10px] font-black uppercase tracking-widest transition-all",style:{background:z===s?o:"#f3f4f6",color:z===s?"#fff":"#6b7280"},children:t.type==="youtube"?"YouTube":"TikTok"},s))}),e.jsx("div",{className:"rounded-2xl overflow-hidden w-full",children:b.map((t,s)=>e.jsx("div",{style:{display:b.length===1||s===z?"block":"none"},children:t.type==="youtube"?e.jsx("div",{className:"bg-black",style:{aspectRatio:"16/9"},children:e.jsx("iframe",{className:"w-full h-full",src:`https://www.youtube.com/embed/${t.youtubeId}?rel=0`,title:`${a.title} video`,frameBorder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0})}):e.jsx("div",{className:"flex items-center justify-center w-full py-2",children:e.jsx("iframe",{className:"rounded-xl",style:{width:"320px",height:"570px"},src:`https://www.tiktok.com/embed/v2/${t.tiktokId}`,title:`${a.title} TikTok`,frameBorder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0})})},s))})]}),e.jsx("p",{className:"rdp-fade-up text-base text-gray-500 leading-relaxed",style:{animationDelay:"0.35s",opacity:c?void 0:0},children:Y??a.description}),e.jsxs("div",{className:"rdp-fade-up border border-gray-100 rounded-2xl overflow-hidden",style:{animationDelay:"0.4s",opacity:c?void 0:0},children:[e.jsxs("button",{onClick:()=>Z(t=>t==="ingredients"?null:"ingredients"),className:"w-full flex items-center justify-between px-5 py-4 bg-white hover:bg-gray-50 transition-colors",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx(Le,{className:"w-4 h-4 flex-shrink-0",style:{color:o}}),e.jsx("span",{className:"text-sm font-black uppercase tracking-tight text-gray-900",children:i("recipes.ingredients")}),e.jsx("span",{className:"text-xs font-bold text-gray-400 bg-gray-100 px-2 py-0.5 rounded-full",children:a.ingredients?.length??0})]}),e.jsx(ae,{className:"w-4 h-4 text-gray-400 transition-transform duration-300 flex-shrink-0",style:{transform:v==="ingredients"?"rotate(180deg)":"rotate(0deg)"}})]}),e.jsx(B,{initial:!1,children:v==="ingredients"&&e.jsx(T.div,{initial:{height:0,opacity:0}
51,animate:{height:"auto",opacity:1},exit:{height:0,opacity:0},transition:{duration:.3,ease:[.22,1,.36,1]},style:{overflow:"hidden"},children:e.jsx("div",{className:"bg-gray-50 px-5 pb-4 pt-1",children:(ce??a.ingredients)?.map((t,s)=>e.jsxs("div",{className:"flex items-center justify-between py-2 border-b border-gray-200/60 last:border-0",children:[e.jsxs("div",{className:"flex items-center gap-2.5 min-w-0",children:[e.jsx("div",{className:"w-2 h-2 rounded-full flex-shrink-0",style:{backgroundColor:t.isMegaProduct?o:"#d1d5db",boxShadow:t.isMegaProduct?`0 0 0 3px ${o}33`:void 0}}),t.isMegaProduct&&t.productSlug?e.jsx(he,{to:`/products/${t.productSlug}`,className:"text-sm font-semibold truncate hover:underline",style:{color:o},children:t.name}):e.jsx("span",{className:`text-sm font-semibold truncate ${t.isMegaProduct?"text-gray-900":"text-gray-600"}`,children:t.name}),t.isMegaProduct&&e.jsx("span",{className:"flex-shrink-0 text-[8px] text-white px-1.5 py-0.5 rounded font-black uppercase tracking-tighter",style:{backgroundColor:o},children:"Mega"})]}),e.jsx("span",{className:"text-sm text-gray-400 font-medium ml-3 whitespace-nowrap flex-shrink-0",children:t.amount})]},s))})},"ingredients")})]}),e.jsxs("div",{className:"rdp-fade-up border border-gray-100 rounded-2xl overflow-hidden",style:{animationDelay:"0.45s",opacity:c?void 0:0},children:[e.jsxs("button",{onClick:()=>Z(t=>t==="steps"?null:"steps"),className:"w-full flex items-center justify-between px-5 py-4 bg-white hover:bg-gray-50 transition-colors",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx(Me,{className:"w-4 h-4 flex-shrink-0",style:{color:o}}),e.jsx("span",{className:"text-sm font-black uppercase tracking-tight text-gray-900",children:i("recipes.preparation")}),e.jsxs("span",{className:"text-xs font-bold text-gray-400 bg-gray-100 px-2 py-0.5 rounded-full",children:[a.steps?.length??0," ",i("recipes.steps")]})]}),e.jsx(ae,{className:"w-4 h-4 text-gray-400 transition-transform duration-300 flex-shrink-0",style:{transform:v==="steps"?"rotate(180deg)":"rotate(0deg)"}})]}),e.jsx(B,{initial:!1,children:v==="steps"&&e.jsx(T.div,{initial:{height:0,opacity:0},animate:{height:"auto",opacity:1},exit:{height:0,opacity:0},transition:{duration:.3,ease:[.22,1,.36,1]},style:{overflow:"hidden"},children:e.jsx("div",{className:"px-5 pb-2 pt-1",children:(ne??a.steps)?.map((t,s)=>e.jsxs("div",{className:"flex gap-4 py-3 border-b border-gray-100 last:border-0 group",children:[e.jsx("div",{className:"flex-shrink-0 w-7 h-7 rounded-full bg-gray-50 border border-gray-200 flex items-center justify-center text-xs font-black text-gray-400 transition-all duration-300",onMouseEnter:l=>{l.currentTarget.style.backgroundColor=o,l.currentTarget.style.borderColor=o,l.currentTarget.style.color="white"},onMouseLeave:l=>{l.currentTarget.style.backgroundColor="",l.currentTarget.style.borderColor="",l.currentTarget.style.color=""},children:s+1}),e.jsx("p",{className:"flex-1 text-sm text-gray-500 leading-relaxed pt-1 group-hover:text-gray-800 transition-colors duration-300",children:t})]},s))})},"steps")})]})]}),e.jsx("div",{className:"order-1 lg:order-2 lg:sticky lg:top-24",children:p.length>0&&e.jsxs("div",{className:"rdp-fade-in",style:{animationDelay:"0.3s",opacity:c?void 0:0},children:[e.jsx("div",{className:"relative bg-gray-50 border border-gray-100 rounded-3xl overflow-hidden",style:{aspectRatio:"4/5"},children:p.map((t,s)=>e.jsx("div",{className:"absolute inset-0 transition-opacity duration-700",style:{opacity:s===u?1:0,zIndex:s===u?1:0},children:e.jsx("img",{src:t.url,alt:`${a.title} ${s+1}`,className:"w-full h-full object-cover cursor-pointer",style:{transform:s===u?"scale(1)":"scale(1.05)",transition:"transform 0.7s ease"},onClick:()=>{const l=n.indexOf(t.url);l>=0&&me(l)}})},s))}),p.length>1&&e.jsx("div",{className:"mt-4 flex gap-3 overflow-x-auto py-1 justify-center scrollbar-hide",children:p.map((t,s)=>e.jsx("button",{onClick:()=>K(s),className:"flex-shrink-0 w-16 h-16 rounded-xl overflow-hidden transition-all duration-300 bg-gray-50",style:{boxShadow:s===u?`0 0 0 2.5px ${o}`:"0 0 0 1.5px #e5e7eb",opacity:s===u?1:.55,transform:s===u?"scale(1.07)":"scale(1)"},children:e.jsx("img",{src:t.url,alt:`thumb ${s+1}`,className:"w-full h-full object-cover"})},s))}),p.length>1&&e.jsx("div",{className:"mt-3 flex justify-center gap-2",children:p.map((t,s)=>e.jsx("button",{onClick:()=>K(s),className:"rounded-full transition-all duration-300",style:{width:s===u?"22px":"7px",height:"7px",background:s===u?o:"#D1D5DB"}},s))})]})})]})})}),e.jsx(B,{children:D&&e.jsxs(T.div,{initial:{opacity:0}
51,animate:{opacity:1},exit:{opacity:0},className:"fixed inset-0 z-50 bg-black/96 flex items-center justify-center p-4",onClick:C,children:[e.jsx("button",{onClick:C,className:"absolute top-5 right-5 z-10 p-2.5 rounded-full bg-white/10 hover:bg-white/20 text-white/70 hover:text-white transition-all",children:e.jsx(Pe,{className:"w-6 h-6"})}),e.jsxs("div",{className:"absolute top-6 left-1/2 -translate-x-1/2 text-white/40 text-xs font-black tracking-widest uppercase",children:[f+1," / ",n.length]}),n.length>1&&e.jsxs(e.Fragment,{children:[e.jsx("button",{onClick:t=>{t.stopPropagation(),U()},className:"absolute left-4 z-10 p-3 rounded-full bg-white/10 hover:bg-white/20 text-white/70 hover:text-white transition-all",children:e.jsx(Ue,{className:"w-7 h-7"})}),e.jsx("button",{onClick:t=>{t.stopPropagation(),$()},className:"absolute right-4 z-10 p-3 rounded-full bg-white/10 hover:bg-white/20 text-white/70 hover:text-white transition-all",children:e.jsx($e,{className:"w-7 h-7"})})]}),e.jsx("div",{className:"relative max-w-4xl max-h-[82vh] flex items-center justify-center px-16",onClick:t=>t.stopPropagation(),children:e.jsx(T.img,{initial:{opacity:0,scale:.92},animate:{opacity:1,scale:1},exit:{opacity:0,scale:.92},src:n[f],alt:`${a.title} ${f+1}`,className:"max-w-full max-h-[82vh] object-contain rounded-2xl"},f)}),e.jsx("div",{className:"absolute bottom-5 left-0 right-0 flex justify-center gap-2 px-6 overflow-x-auto",children:n.map((t,s)=>e.jsx("button",{onClick:l=>{l.stopPropagation(),N(s)},className:"flex-shrink-0 w-12 h-12 rounded-xl overflow-hidden border-2 transition-all duration-200 hover:opacity-100",style:{borderColor:s===f?o:"transparent",opacity:s===f?1:.4,transform:s===f?"scale(1.08)":"scale(1)"},children:e.jsx("img",{src:t,alt:`lb-${s}`,className:"w-full h-full object-cover"})},s))})]})}),e.jsx(R,{})]})}export{it as default};

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.