https://subkun.com/assets/Comparison-dCxfRFxE.js

1import{j as t}from"./hero-player-YKmwA1ZN.js";import{r as d,R as ne,P as q,C as ae,S as oe,M as ie}from"./vendor-lucide-B14i0frt.js";import{u as F}from"./hero-thumbnails-CrKE5M_c.js";import"./vendor-utils-D19diF5V.js";import"./hero-data-DgQMqgSK.js";const B="drop-shadow(1.41px 1.41px 3px oklch(0 0 0 / 0.3))",re="drop-shadow(1.41px 1.41px 3px oklch(0 0 0 / 1))",ce=12,W=48,z=0,le=.84,R=56,K=80,he=24,de=18,ue=48,G=24,me=24,fe=260,pe=.88,H=[{id:"default",highlightChars:5,bg:"oklch(0 0 260 / 0.6)",text:"oklch(1 0 260)",stroke:null,highlight:"oklch(0.8 0.2 267)",blur:"2px",shadow:B,strokeWidth:0,lineHeightOffset:0,fontFamily:"default",underline:!0},{id:"clear",highlightChars:5,bg:"oklch(1 0 0 / 0.7)",text:"oklch(0 0 0)",stroke:null,highlight:"oklch(0.5 0.2 267)",blur:"2px",shadow:"none",strokeWidth:0,lineHeightOffset:0,fontFamily:"default",underline:!0},{id:"outline",highlightChars:4,bg:"oklch(0 0 260 / 0)",text:"oklch(1 0 260)",stroke:"oklch(0 0 260)",highlight:"oklch(0.8 0.2 267)",blur:"none",shadow:B,strokeWidth:2,lineHeightOffset:0,fontFamily:"default",underline:!1},{id:"just_shadow",highlightChars:6,bg:"oklch(0 0 260 / 0)",text:"oklch(1 0 260)",stroke:null,highlight:"oklch(0.95 0.2 90)",blur:"none",shadow:re,strokeWidth:0,lineHeightOffset:0,fontFamily:"default",underline:!0},{id:"paper_note",highlightChars:4,bg:"oklch(0.995 0.02 90 / 0.9)",text:"oklch(0.2 0.2 30)",stroke:null,highlight:"oklch(0.4 0.2 240)",blur:"none",shadow:"none",strokeWidth:0,lineHeightOffset:.1,fontFamily:"lxgw-wenkai",underline:!0},{id:"glass",highlightChars:5,bg:"oklch(0.98 0.08 220 / 0.75)",text:"oklch(0.2 0.2 220)",stroke:null,highlight:"oklch(0.6 0.2 250)",blur:"10px",shadow:"none",strokeWidth:0,lineHeightOffset:0,fontFamily:"default",underline:!0},{id:"cyber_neon",highlightChars:4,bg:"oklch(0.15 0.2 260 / 0.85)",text:"oklch(0.96 0.16 0)",stroke:null,highlight:"oklch(0.9 0.2 190)",blur:"4px",shadow:"none",strokeWidth:0,lineHeightOffset:0,fontFamily:"noto-sans",underline:!1},{id:"deep_sea",highlightChars:3,bg:"oklch(0.15 0.2 260 / 0.75)",text:"oklch(1 0 260)",stroke:null,highlight:"oklch(0.97 0.12 190)",blur:"4px",shadow:"none",strokeWidth:0,lineHeightOffset:.1,fontFamily:"zcool-kuaile",underline:!0},{id:"blackboard",highlightChars:5,bg:"oklch(0.1 0.2 150 / 0.8)",text:"oklch(1 0 0)",stroke:null,highlight:"oklch(0.98 0.08 90)",blur:"5px",shadow:"none",strokeWidth:0,lineHeightOffset:.2,fontFamily:"lxgw-wenkai",underline:!0},{id:"matrix_green",highlightChars:5,bg:"oklch(0 0 170 / 0.95)",text:"oklch(0.9 0.2 145)",stroke:null,highlight:"oklch(1 0 145)",blur:"none",shadow:"none",strokeWidth:0,lineHeightOffset:0,fontFamily:"noto-sans",underline:!0},{id:"macaron_pink",highlightChars:4,bg:"oklch(0.98 0.08 350 / 0.9)",text:"oklch(0.3 0.2 350)",stroke:null,highlight:"oklch(0.6 0.2 340)",blur:"none",shadow:"none",strokeWidth:0,lineHeightOffset:.1,fontFamily:"xiaolai-sc",underline:!0},{id:"maple_rust",highlightChars:4,bg:"oklch(0.1 0.2 30 / 0.9)",text:"oklch(0.98 0.08 30)",stroke:null,highlight:"oklch(0.96 0.16 45)",blur:"none",shadow:"none",strokeWidth:0,lineHeightOffset:.1,fontFamily:"noto-serif",underline:!0}],X=[{id:"mudai",hue:260,chroma:.01,shift:0,enableSecondary:!1},{id:"gunjou",hue:255,chroma:.04,shift:0,enableSecondary:!1},{id:"hakushi",hue:70,chroma:.015,shift:0,enableSecondary:!1},{id:"aotori",hue:165,chroma:.03,shift:30,enableSecondary:!0},{id:"hanamizu",hue:350,chroma:.04,shift:-90,enableSecondary:!0},{id:"natsugasumi",hue:65,chroma:.04,shift:150,enableSecondary:!0},{id:"lilac",hue:145,chroma:.02,shift:180,enableSecondary:!0},{id:"tsukiho",hue:280,chroma:.075,shift:180,enableSecondary:!0},{id:"mikan",hue:30,chroma:.075,shift:0,enableSecondary:!1},{id:"gentou",hue:190,chroma:.075,shift:150,enableSecondary:!0},{id:"haruno",hue:330,chroma:.075,shift:90,enableSecondary:!0},{id:"shinya",hue:310,chroma:.075,shift:180,enableSecondary:!0}],ge="/assets/porter-robinson-smile-screenshot.png",P={default:"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif","noto-sans":"'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif","noto-serif":"'Noto Serif SC', -apple-system, BlinkMacSystemFont, serif","lxgw-wenkai":"'LXGW WenKai Screen', 'LXGW WenKai Screen R', -apple-system, BlinkMacSystemFont, sans-serif","zcool-kuaile":"'ZCOOL KuaiLe', -apple-system, BlinkMacSystemFont, sans-serif","xiaolai-sc":"'Xiaolai SC', -apple-system, BlinkMacSystemFont, sans-serif"};function U(e,n,i){return Math.min(i,Math.max(n,e))}function xe(e,n,i){return e+(n-e)*i}function A(e){return(e%360+360)%360}function j(e,n,i,a,s){const o=n*(i/.04),l=`oklch(${e.toFixed(3)} ${o.toFixed(3)} ${A(a).toFixed(1)}`;return s===void 0?`${l})`:`${l} / ${s.toFixed(3)})`}function be(e,n){const i=e.chroma/.04,a=o=>o*i,s=e.enableSecondary?A(e.hue+e.shift):e.hue;return n?{pageBg:`oklch(0.160 ${a(.04).toFixed(4)} ${e.hue})`,player:`oklch(0.100 ${a(.04).toFixed(4)} ${e.hue})`,sidebar:`oklch(0.200 ${a(.05).toFixed(4)} ${e.hue})`,accent:`oklch(0.750 ${a(.18).toFixed(4)} ${s})`}:{pageBg:`oklch(0.960 ${a(.03).toFixed(4)} ${e.hue})`,player:`oklch(0.990 ${a(.02).toFixed(4)} ${e.hue})`,sidebar:`oklch(0.920 ${a(.04).toFixed(4)} ${e.hue})`,accent:`oklch(0.550 ${a(.2).toFixed(4)} ${s})`}}function ye(e,n){const i=e.enableSecondary?A(e.hue+e.shift):e.hue,a=A(e.hue+e.shift),s=n==="dark";return{"--yt-bg-primary":j(s?.16:.96,.02,e.chroma,e.hue),"--yt-bg-secondary":j(s?.2:.93,.025,e.chroma,e.hue),"--yt-bg-elevated":j(s?.26:.98,.03,e.chroma,e.hue),"--yt-text-primary":j(s?.93:.18,.03,e.chroma,e.hue),"--yt-text-secondary":j(s?.72:.38,.04,e.chroma,e.hue),"--yt-text-weak":j(.55,.03,e.chroma,e.hue),"--yt-accent":j(s?.75:.55,s?.18:.2,e.chroma,i),"--yt-accent-hover":j(s?.8:.5,s?.18:.2,e.chroma,i),"--yt-secondary-accent":e.enableSecondary?j(s?.3:.88,.1,e.chroma,a):j(s?.24:.9,.035,e.chroma,e.hue),"--yt-secondary-accent-strong":e.enableSecondary?j(s?.46:.68,.14,e.chroma,a):j(s?.36:.76,.05,e.chroma,e.hue),"--yt-border":j(s?.34:.85,.03,e.chroma,e.hue),"--yt-chip-bg":j(s?.24:.9,.035,e.chroma,e.hue),"--yt-chip-selected":j(s?.3:.94,.04,e.chroma,i),"--yt-hover":s?"oklch(1 0 0 / 0.08)":"oklch(0 0 0 / 0.06)","--yt-scrim":s?"oklch(0 0 0 / 0.44)":"oklch(1 0 0 / 0.52)","--yt-shadow":s?"oklch(0 0 0 / 0.45)":"oklch(0 0 0 / 0.16)","--yt-theme-hue":`${e.hue}`,"--yt-theme-chroma":`${e.chroma}`,"--yt-theme-shift":`${e.shift}`}}

1function ke(){const e=d.useRef(null),[n,i]=d.useState(0);return d.useEffect(()=>{let a=0;const s=()=>{a=0;const l=e.current;if(!l)return;const r=l.getBoundingClientRect(),h=Math.max(1,r.height-window.innerHeight),u=U(-r.top/h,0,1);i(g=>Math.abs(g-u)<.001?g:u)},o=()=>{a||(a=window.requestAnimationFrame(s))};return s(),window.addEventListener("scroll",o,{passive:!0}),window.addEventListener("resize",o),()=>{window.removeEventListener("scroll",o),window.removeEventListener("resize",o),a&&window.cancelAnimationFrame(a)}},[]),{sectionRef:e,progress:n}}function we(e,n,i){const[a,s]=d.useState(()=>e>=n);return d.useEffect(()=>{s(o=>o?e>i:e>=n)},[n,i,e]),a}function Se(e){const n=d.useRef(null),i=d.useRef(null),a=d.useRef(null),[s,o]=d.useState(null),[l,r]=d.useState(null),[h,u]=d.useState(null),[g,S]=d.useState(null),[x,p]=d.useState(null);return d.useLayoutEffect(()=>{if(e)return;const b=n.current,m=i.current,y=a.current,c=m==null?void 0:m.querySelector(".showcase-player");if(!b||!m||!y||!c)return;let w=0;const N=()=>{w=0;const E=m.getBoundingClientRect(),$=b.getBoundingClientRect(),f=y.getBoundingClientRect(),v=ce,T=E.width*le,O=E.height-W-$.height-z-f.height-v-W,Z=T*9/16<=O,_=Math.max(0,Z?T:O*16/9),J=(E.width-_)/2,L=_*9/16,Q=$.height+z+L+v+f.height,D=Math.max(0,(E.height-Q)/2),I=D+$.height+z,ee=I+L,te=E.height-f.height-W,se=ee+v;o(D),u(J),S(I),p(_),r(Math.min(se,te))},C=()=>{w||(w=window.requestAnimationFrame(N))};N();const k=new ResizeObserver(C);return k.observe(b),k.observe(m),k.observe(y),k.observe(c),window.addEventListener("resize",C),()=>{k.disconnect(),window.removeEventListener("resize",C),w&&window.cancelAnimationFrame(w)}},[e]),{introRef:n,stageRef:i,presetRef:a,introTop:s,presetTop:l,playerLeft:h,playerTop:g,playerWidth:x}}function ve(e){const n=d.useRef(null),[i,a]=d.useState(1);return d.useLayoutEffect(()=>{if(!e){a(1);return}const s=n.current;if(!s)return;const o=s.querySelector(".showcase-theme-content");let l=0;const r=()=>{l=0;const g=s.getBoundingClientRect(),S=g.width*.636*9/16,x=(o==null?void 0:o.offsetHeight)??fe,p=K+S+de+ue+G,b=g.height-he,m=Math.min(1,(b-R-me-x)/(p-R-G));a(m)},h=()=>{l||(l=window.requestAnimationFrame(r))};r();const u=new ResizeObserver(h);return u.observe(s),o&&u.observe(o),window.addEventListener("resize",h),()=>{u.disconnect(),window.removeEventListener("resize",h),l&&window.cancelAnimationFrame(l)}},[e]),{dockedStageRef:n,dockedScale:i}}function V(){const e=d.useRef(null),[n,i]=d.useState(!1),a=d.useRef(null);return d.useLayoutEffect(()=>{const s=e.current;if(!s)return;let o=0;const l=()=>{o=0;const u=s.querySelector(".showcase-preset-grid, .showcase-theme-grid");if(!u)return;const S=(u.clientWidth-6*5)/6,x=s.querySelectorAll(".preset-name, .preset-name-en, .mini-name"),p=Array.from(x).some(b=>{const m=window.getComputedStyle(b),y=a.current??document.createElement("canvas");a.current=y;const c=y.getContext("2d");if(!c)return!1;c.font=`${m.fontWeight} ${m.fontSize} ${m.fontFamily}`;const w=c.measureText(b.textContent??"").width,N=b.classList.contains("mini-name")?S*.64-12:S-16;return w>N*pe});i(p)},r=()=>{o||(o=window.requestAnimationFrame(l))};l();const h=new ResizeObserver(r);return h.observe(s),s.querySelectorAll(".preset-card, .mini-card").forEach(u=>h.observe(u)),window.addEventListener("resize",r),()=>{h.disconnect(),window.removeEventListener("resize",r),o&&window.cancelAnimationFrame(o)}},[]),{ref:e,isCompactGrid:n}}function M(e,n){return{...e,originalFontSize:(n==null?void 0:n.originalFontSize)??15,translationFontSize:(n==null?void 0:n.translationFontSize)??20,position:(n==null?void 0:n.position)??"bottom",showTranslation:(n==null?void 0:n.showTranslation)??!0,swapOrder:(n==null?void 0:n.swapOrder)??!1}}function je({subtitleState:e,isDocked:n,dockedScale:i,themeVars:a,floatingPlayerLeft:s,floatingPlayerTop:o,floatingPlayerWidth:l}={}){const r=e??M(H[0]),h=n??!0,[u,g]=d.useState(48),[S,x]=d.useState(!1),[p,b]=d.useState(!1),m=d.useRef(null),y=d.useRef(),{t:c}=F();d.useEffect(()=>{b(!0);const f=setTimeout(()=>b(!1),600);return()=>clearTimeout(f)},[h]);const w=ne.useCallback(f=>{y.current&&cancelAnimationFrame(y.current),y.current=requestAnimationFrame(()=>{if(!m.current)return;const v=m.current.getBoundingClientRect(),T=U((f-v.left)/v.width*100,0,100);g(T)})},[]);d.useEffect(()=>()=>{y.current&&cancelAnimationFrame(y.current)},[]);const N=h?1:0,C=u,k=i??1,E=h?`calc((100% - 100% * ${k}) / 2 + 24px * ${k})`:void 0,$={...h?a:void 0,width:h?`calc(63.6% * ${k})`:l==null?"min(72%, calc((100vh - 450px) * 16 / 9))":`${l}px`,top:h?`calc(${R}px + (${K}px - ${R}px) * ${k})`:o==null?"110px":`${o}px`,left:h?E:s==null?"14%":`${s}px`,transform:"translateX(0)",borderRadius:`${xe(24,12,N).toFixed(1)}px`,boxShadow:"none"};return t.jsxs("div",{ref:m,className:`showcase-player ${h?"is-docked":""} ${p?"is-transitioning":""}`,style:$,onPointerDown:f=>{var v;f.pointerType!=="mouse"&&(x(!0),w(f.clientX),(v=m.current)==null||v.setPointerCapture(f.pointerId))},onPointerMove:f=>{(f.pointerType==="mouse"||S)&&w(f.clientX)},onPointerUp:f=>{var v;x(!1),(v=m.current)!=null&&v.hasPointerCapture(f.pointerId)&&m.current.releasePointerCapture(f.pointerId)},onPointerCancel:()=>x(!1),"aria-label":c.comparison.aria.slider,children:[t.jsxs("div",{className:"showcase-video-media",children:[t.jsx(Ne,{alt:c.comparison.afterAlt}),t.jsx(Ee,{state:r}),t.jsxs("div",{className:"showcase-badge showcase-badge-after",children:[t.jsx("span",{className:"showcase-badge-dot"}),t.jsx("span",{children:c.comparison.afterLabel})]})]}),t.jsxs("div",{className:"showcase-video-media showcase-video-before",style:{clipPath:`inset(0 ${100-C}% 0 0)`,opacity:h?0:1},children:[t.jsx(Y,{alt:c.comparison.beforeAlt}),t.jsx(Ce,{}),t.jsxs("div",{className:"showcase-badge showcase-badge-before",children:[t.jsx("span",{className:"showcase-badge-dot"}),t.jsx("span",{children:c.comparison.beforeLabel})]})]}),t.jsx("div",{className:"showcase-handle",style:{left:`${C}%`}

1,children:t.jsxs("div",{className:"showcase-handle-knob",children:[t.jsx("span",{}),t.jsx("span",{})]})}),t.jsxs("div",{className:"showcase-player-chrome",children:[t.jsx("div",{className:"showcase-progress-rail",children:t.jsx("div",{className:"showcase-progress-fill"})}),t.jsxs("div",{className:"showcase-player-controls",children:[t.jsx(q,{size:16,fill:"currentColor"}),t.jsx("span",{children:"14:28"}),t.jsx(ae,{size:16})]})]})]})}function Ne({alt:e}){return t.jsx("div",{className:"showcase-hero-demo-surface","aria-label":e,children:t.jsx(Y,{alt:""})})}function Y({alt:e}){return t.jsx("img",{src:ge,alt:e,className:"showcase-video-image",draggable:!1})}function Ce(){const{t:e}=F();return t.jsx("div",{className:"showcase-native-subtitle","aria-label":e.comparison.aria.nativeSubtitle,children:e.comparison.nativeSubtitleLines.map(n=>t.jsx("span",{children:n},n))})}function Ee({state:e}){const{t:n}=F(),i=P[e.fontFamily]??P.default,a=1.25+e.lineHeightOffset,s=e.stroke&&e.strokeWidth>0,o=e.blur==="none"?void 0:e.blur,l=e.shadow==="none"?void 0:e.shadow,r=e.highlightEnabled!==!1,h={color:e.text,fontFamily:i,lineHeight:a,filter:l,WebkitTextStroke:s?`${e.strokeWidth}px ${e.stroke}`:void 0,paintOrder:s?"stroke fill":void 0},u=t.jsx("div",{className:"showcase-subtitle-line showcase-subtitle-original",style:{...h,fontSize:`${e.originalFontSize}px`},children:n.comparison.subtitleSample.words.map((x,p)=>t.jsx("span",{className:p===n.comparison.subtitleSample.highlightIndex&&r?"is-highlighted":void 0,style:p===n.comparison.subtitleSample.highlightIndex&&r?{color:e.highlight,textDecorationColor:e.highlight}:void 0,children:x},`${x}-${p}`))},"original"),g=e.showTranslation?t.jsx("div",{className:"showcase-subtitle-line showcase-subtitle-translation",style:{...h,fontSize:`${e.translationFontSize}px`},children:n.comparison.subtitleSample.translation},"translation"):null,S=e.swapOrder?[u,g]:[g,u];return t.jsx("div",{className:`showcase-subtitle-shell is-${e.position}`,children:t.jsx("div",{className:`showcase-subtitle-box ${e.underline?"has-underline":""}`,style:{backgroundColor:e.bg,backdropFilter:o,WebkitBackdropFilter:o},children:S})})}const Fe=[{en:[92,78],zh:[80]},{active:!0,en:[90,96,42],zh:[88,52]},{en:[86,70,54],zh:[82,60]},{en:[94,80],zh:[76]},{en:[88,64],zh:[70,48]},{en:[90,84,38],zh:[78]}];function $e(){const{t:e}=F();return t.jsxs("div",{className:"showcase-transcript-rail","aria-label":e.comparison.aria.transcriptRail,children:[t.jsx("div",{className:"showcase-transcript-header",children:t.jsx("span",{children:e.common.brandName})}),t.jsx("div",{className:"showcase-transcript-list",children:Fe.map((n,i)=>t.jsxs("div",{className:`showcase-transcript-item ${n.active?"is-active":""}`,children:[t.jsx("span",{className:"showcase-transcript-time"}),t.jsxs("div",{className:"showcase-transcript-content",children:[n.en.map((a,s)=>t.jsx("span",{className:"showcase-transcript-bar showcase-transcript-bar--en",style:{width:`${a}%`}},`en-${s}`)),n.zh.map((a,s)=>t.jsx("span",{className:"showcase-transcript-bar showcase-transcript-bar--zh",style:{width:`${a}%`}},`zh-${s}`))]})]},i))})]})}function Te(){const{t:e}=F();return t.jsx("aside",{className:"showcase-recommendations","aria-label":e.comparison.aria.recommendations,children:Array.from({length:6}).map((n,i)=>t.jsxs("div",{className:"showcase-recommendation",children:[t.jsx("div",{className:"showcase-thumb"}),t.jsxs("div",{className:"showcase-rec-copy",children:[t.jsx("span",{}),t.jsx("span",{}),t.jsx("span",{})]})]},i))})}function Oe({preset:e,isActive:n,onClick:i}){const{t:a}=F(),s=a.comparison.subtitlePresets[e.id],o=e.stroke&&e.strokeWidth>0,l=e.blur==="none"?void 0:e.blur,r=e.shadow==="none"?void 0:e.shadow,h=o?`${e.strokeWidth}px ${e.stroke}`:void 0,u=s.en.slice(0,Math.max(0,s.en.length-e.highlightChars)),g=s.en.slice(-e.highlightChars);return t.jsx("button",{type:"button",className:`preset-card ${n?"active":""}`,onClick:i,children:t.jsxs("span",{className:"preset-card-inner",style:{backgroundColor:e.bg,backdropFilter:l,WebkitBackdropFilter:l,fontFamily:P[e.fontFamily]??P.default},children:[t.jsx("span",{className:"preset-name",style:{color:e.text,WebkitTextStroke:h,paintOrder:o?"stroke fill":void 0,filter:r},children:s.zh}),t.jsxs("span",{className:"preset-name-en",style:{color:e.text,WebkitTextStroke:h,paintOrder:o?"stroke fill":void 0,filter:r},children:[u,t.jsx("em",{style:{color:e.highlight,textDecoration:e.underline?"underline":"none",textUnderlineOffset:"2px"},children:g})]})]})})}function Re({preset:e,isActive:n,isDark:i,onSelect:a}){const{t:s}=F(),o=s.comparison.themePresets[e.id],l=be(e,i),r=d.useRef(null),h=d.useRef(null),u=d.useRef(null),g=()=>{var p;(p=u.current)!=null&&p.raf&&cancelAnimationFrame(u.current.raf),u.current=null},S=()=>{const p=r.current,b=h.current;

1if(!p||!b)return;g(),b.style.transition="none";const m=Math.random()*Math.PI*2,y=.7,c={raf:0,x:0,y:0,vx:Math.cos(m)*y,vy:Math.sin(m)*y};u.current=c;const w=()=>{if(u.current!==c||!r.current||!h.current)return;const N=r.current,C=h.current,k=6,E=8,$=N.clientHeight*.1,f=-k,v=N.clientWidth-C.offsetWidth-k,T=-E,O=N.clientHeight-C.offsetHeight-E-$;c.x+=c.vx,c.y+=c.vy,c.x<f&&(c.x=f,c.vx=-c.vx),c.x>v&&(c.x=v,c.vx=-c.vx),c.y<T&&(c.y=T,c.vy=-c.vy),c.y>O&&(c.y=O,c.vy=-c.vy),C.style.transform=`translate(${c.x}px, ${c.y}px)`,c.raf=requestAnimationFrame(w)};c.raf=requestAnimationFrame(w)},x=()=>{g();const p=h.current;p&&(p.style.transition="transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1)",p.style.transform="translate(0, 0)")};return d.useEffect(()=>()=>g(),[]),t.jsx("button",{type:"button",className:`mini-card ${n?"active":""}`,style:{background:l.pageBg,"--mini-active":l.accent},onClick:a,onMouseEnter:S,onMouseLeave:x,"aria-label":o,children:t.jsx("span",{className:"mini-canvas",children:t.jsxs("span",{className:"mini-row",children:[t.jsxs("span",{className:"mini-player",ref:r,style:{background:l.player},children:[t.jsx("span",{ref:h,className:"mini-name",style:{color:i?"oklch(1 0 0)":"oklch(0 0 0)"},children:o}),t.jsx("span",{className:"mini-progress",style:{background:l.accent}})]}),t.jsx("span",{className:"mini-sidebar",style:{background:l.sidebar}})]})})})}function He({activeTheme:e,setActiveTheme:n,mode:i,setMode:a}){const{t:s}=F(),{ref:o,isCompactGrid:l}=V();return t.jsxs("div",{ref:o,className:`showcase-theme-content ${l?"is-compact-grid":""}`,children:[t.jsxs("div",{className:"showcase-panel-heading",children:[t.jsxs("div",{children:[t.jsx("p",{children:s.comparison.themePanel.title}),t.jsx("span",{children:s.comparison.themePanel.description})]}),t.jsxs("div",{className:"showcase-mode-toggle",children:[t.jsx("button",{className:i==="light"?"is-active":"",onClick:()=>a("light"),"aria-label":s.comparison.themePanel.lightLabel,children:t.jsx(oe,{size:14})}),t.jsx("button",{className:i==="dark"?"is-active":"",onClick:()=>a("dark"),"aria-label":s.comparison.themePanel.darkLabel,children:t.jsx(ie,{size:14})})]})]}),t.jsx("div",{className:"showcase-theme-grid",children:X.map(r=>t.jsx(Re,{preset:r,isActive:r.id===e.id,isDark:i==="dark",onSelect:()=>n(r)},r.id))})]})}function Pe({mode:e,activePreset:n,setActivePreset:i,setSubtitleState:a}){const{t:s}=F(),{ref:o,isCompactGrid:l}=V();return t.jsxs("div",{ref:o,className:`showcase-presets-panel ${e==="dark"?"is-dark":"is-light"} ${l?"is-compact-grid":""}`,children:[t.jsx("div",{className:"showcase-panel-heading",children:t.jsxs("div",{children:[t.jsx("p",{children:s.comparison.subtitlePanel.title}),t.jsx("span",{children:s.comparison.subtitlePanel.description})]})}),t.jsx("div",{className:"showcase-preset-grid",children:H.map(r=>t.jsx(Oe,{preset:r,isActive:r.id===n,onClick:()=>{i(r.id),a(h=>M(r,h))}},r.id))})]})}function Ae({activeTheme:e,setActiveTheme:n,mode:i,setMode:a,isVisible:s,dockedScale:o,themeVars:l}){const{t:r}=F(),h=s?1:0;return t.jsxs("div",{className:"showcase-youtube-page",style:{...l,opacity:h,pointerEvents:s?"auto":"none"},children:[t.jsxs("div",{className:"showcase-youtube-topbar",children:[t.jsxs("div",{className:"showcase-youtube-logo",children:[t.jsx(q,{size:14,fill:"currentColor"}),t.jsx("span",{children:r.comparison.youtubeLabel})]}),t.jsx("span",{className:"showcase-youtube-avatar"})]}),t.jsxs("div",{className:"showcase-youtube-body",style:{"--showcase-docked-scale":o,"--showcase-docked-inset":`calc((100% - 100% * ${o}) / 2)`},children:[t.jsxs("aside",{className:"showcase-right-rail","aria-label":r.comparison.aria.rightRail,children:[t.jsx($e,{}),t.jsx(Te,{})]}),t.jsxs("div",{className:"showcase-video-meta","aria-label":r.comparison.aria.videoMeta,children:[t.jsx("span",{className:"showcase-meta-bar showcase-meta-bar--title"}),t.jsxs("div",{className:"showcase-meta-row",children:[t.jsx("span",{className:"showcase-meta-avatar"}),t.jsx("span",{className:"showcase-meta-bar showcase-meta-bar--author"}),t.jsx("button",{children:r.comparison.meta.subscribe}),t.jsx("button",{children:r.comparison.meta.share})]})]}),t.jsx("div",{className:"showcase-theme-dock",children:t.jsx(He,{activeTheme:e,setActiveTheme:n,mode:i,setMode:a})})]})]})}function Ie(){const{t:e}=F(),{sectionRef:n,progress:i}

1=ke(),[a,s]=d.useState(H[0].id),[o,l]=d.useState(()=>M(H[0])),[r,h]=d.useState(X[1]),[u,g]=d.useState("light"),S=d.useMemo(()=>ye(r,u),[r,u]),x=we(i,.34,.3),p=x,{introRef:b,stageRef:m,presetRef:y,introTop:c,presetTop:w,playerLeft:N,playerTop:C,playerWidth:k}=Se(x),{dockedStageRef:E,dockedScale:$}=ve(x);return t.jsx("section",{id:"comparison",ref:n,"data-region":"comparison",className:"product-showcase",children:t.jsxs("div",{className:"product-showcase-sticky",children:[t.jsxs("div",{ref:b,className:"showcase-intro",style:{opacity:x?0:1,top:c===null?void 0:`${c}px`},children:[t.jsxs("h2",{children:[t.jsx("span",{children:e.comparison.headingHighlight}),e.comparison.headingSuffix]}),t.jsx("p",{children:e.comparison.description})]}),t.jsxs("div",{ref:f=>{m.current=f,E.current=f},className:"showcase-stage",children:[t.jsx(je,{subtitleState:o,isDocked:x,dockedScale:$,themeVars:S,floatingPlayerLeft:N,floatingPlayerTop:C,floatingPlayerWidth:k}),t.jsx("div",{ref:y,className:`showcase-floating-presets ${x?"is-hidden":""}`,style:{...w===null?{}:{top:`${w}px`,bottom:"auto"},...N===null?{}:{left:`${N}px`},...k===null?{}:{width:`${k}px`}},children:t.jsx(Pe,{mode:u,activePreset:a,setActivePreset:s,setSubtitleState:l})}),t.jsx(Ae,{activeTheme:r,setActiveTheme:h,mode:u,setMode:g,isVisible:p,dockedScale:$,themeVars:S})]})]})})}export{Ie as Comparison,je as ComparisonSlider};