https://seraphflora.com/assets/OrganismExploded-BSvvgROX.js

1import{r as A,j as e}from"./index-3oNmWKbl.js";const S="/assets/exploded-yew-jwbs3iBd.jpg",B="/assets/exploded-willow-fWyvXVjH.jpg",E="/assets/exploded-foxglove-DHFv54dJ.jpg",F="/assets/exploded-periwinkle-ByAnYbh_.jpg",P="/assets/exploded-mycelium-Bq38CYPk.jpg",L="/assets/exploded-microbe-ZlS5VS5E.jpg",R="/assets/layer-yew-01-organism-BXMyrR5K.jpg",O="/assets/layer-yew-02-tissue-Ch8hMGnZ.jpg",Y="/assets/layer-yew-03-cell-Cxx-kq9R.jpg",_="/assets/layer-yew-04-molecule-8eG_2B5i.jpg",T={"pacific-yew":S,willow:B,foxglove:E,"madagascar-periwinkle":F,periwinkle:F,mycelium:P,streptomyces:L,microbe:L},G={"pacific-yew":[R,O,Y,_]},t="#7fe9ff",o="#cdad72",i="'JetBrains Mono', monospace",m="'Lora', serif",r=[{zoom:"×1",what:"Whole organism · visible to the eye"},{zoom:"×50",what:"Tissue · a hand-lens / light microscope view"},{zoom:"×2,000",what:"Single cell · electron microscope scale"},{zoom:"×10⁹",what:"Molecule · the drug itself, ~1 nanometre"}];function I({organism:a,separation:x}){var f,j,v,w,$,N,k;const[s,y]=A.useState(0),C=T[a.id]??S,g=G[a.id],p=a.layers.length?a.layers:[],c=p.length||4,M=12+x*66;return e.jsxs("div",{className:"grid grid-cols-1 lg:grid-cols-[1.15fr_0.85fr] gap-6",children:[e.jsxs("div",{className:"relative rounded-xl overflow-hidden",style:{border:`1px solid ${t}22`,background:"radial-gradient(ellipse at 50% 12%, #0b2630 0%, #04090c 62%, #02060a 100%)",boxShadow:`inset 0 0 90px ${t}12`},children:[e.jsxs("div",{className:"flex items-center justify-between px-4 py-2 text-[10px] uppercase tracking-[0.24em]",style:{fontFamily:i,color:`${t}cc`,borderBottom:`1px solid ${t}18`},children:[e.jsx("span",{children:"Holo-schematic · exploded specimen"}),e.jsx("span",{style:{color:`${o}cc`},children:a.scientificName})]}),e.jsxs("p",{className:"px-4 pt-4 text-[13px] leading-relaxed",style:{fontFamily:m,color:"hsl(190,25%,82%)"},children:["The same specimen, cut into four plates and zoomed in one step at a time — from the whole ",a.name," down to the single molecule that becomes medicine. Click any plate to read it."]}),e.jsx("div",{className:"px-4 pb-6 pt-5 flex flex-col",style:{gap:M},children:Array.from({length:c}).map((h,n)=>{const d=p[n],l=n===s,u=r[n]??r[r.length-1];return e.jsx("button",{onClick:()=>y(n),"aria-pressed":l,className:"group relative w-full text-left transition-all duration-300",style:{perspective:"1200px"},children:e.jsxs("div",{className:"flex items-stretch gap-3",children:[e.jsxs("div",{className:"shrink-0 w-[74px] pt-1 text-right",style:{fontFamily:i},children:[e.jsxs("div",{className:"text-[11px] tracking-[0.18em]",style:{color:l?o:`${t}99`},children:["L0",n+1]}),e.jsx("div",{className:"text-[10px] tracking-[0.1em]",style:{color:l?`${o}cc`:`${t}66`},children:u.zoom})]}),e.jsxs("div",{className:"relative flex-1 overflow-hidden rounded-md",style:{height:l?260:104,transform:`rotateX(${l?0:8}deg) translateZ(0)`,transformOrigin:"50% 100%",border:`1px solid ${l?o:t}${l?"aa":"33"}`,boxShadow:l?`0 0 0 1px ${o}33, 0 24px 60px -26px ${o}66, inset 0 0 40px ${t}14`:`0 14px 34px -26px #000, inset 0 0 32px ${t}0d`,transition:"all 420ms cubic-bezier(0.22,1,0.36,1)"},children:[e.jsx("div",{className:"absolute inset-0",style:g?{backgroundImage:`url(${g[n]})`,backgroundSize:"cover",backgroundPosition:"center",imageRendering:"auto",filter:l?"saturate(1.08) contrast(1.06)":"saturate(0.45) contrast(0.98) brightness(0.55)",transition:"filter 420ms ease"}:{backgroundImage:`url(${C})`,backgroundSize:`100% ${c*100}%`,backgroundPosition:`center ${n/(c-1)*100}%`,filter:l?"saturate(1.05) contrast(1.05) brightness(0.95)":"saturate(0.5) contrast(0.95) brightness(0.6)",transition:"filter 420ms ease"}}),e.jsx("div",{"aria-hidden":!0,className:"absolute inset-0 pointer-events-none",style:{background:"radial-gradient(ellipse at 50% 40%, transparent 40%, rgba(2,8,12,0.55) 100%)"}}),e.jsx("div",{"aria-hidden":!0,className:"absolute inset-0 pointer-events-none",style:{background:`repeating-linear-gradient(0deg, ${t}0f 0px, transparent 2px, transparent 5px)`,mixBlendMode:"screen"}}),e.jsxs("div",{className:"absolute inset-x-0 bottom-0 px-3 py-2 flex items-baseline justify-between gap-3",style:{background:"linear-gradient(0deg, rgba(2,8,12,0.92) 0%, rgba(2,8,12,0.35) 70%, transparent 100%)"},children:[e.jsx("span",{className:"text-[15px]",style:{fontFamily:m,color:"hsl(190,25%,95%)"},children:(d==null?void 0:d.label)??`Layer ${n+1}`}),e.jsx("span",{className:"text-[10px] tracking-[0.12em] text-right hidden sm:block",style:{fontFamily:i,color:l?`${o}cc`:`${t}77`},children:l?u.what:u.zoom})]})]})]})},(d==null?void 0:d.key)??n)})})]}),e.jsxs("aside",{className:"rounded-xl p-5",style:{border:`1px solid ${t}1f`,background:"linear-gradient(180deg, rgba(8,26,32,0.75), rgba(3,8,11,0.9))"},children:[e.jsxs("div",{className:"flex items-center justify-between text-[10px] uppercase tracking-[0.24em] mb-4",style:{fontFamily:i,color:`${o}cc`},children:[e.jsx("span",{children:"Layer readout"}),e.jsxs("span",{style:{color:`${t}99`},children:["0",s+1," / 0",c]})]}),g&&e.jsxs("figure",{className:"relative mb-4 overflow-hidden rounded-lg",style:{border:`1px solid ${o}44`,aspectRatio:"4 / 3"},children:[e.jsx("img",{src:g[s],alt:`${a.name} — ${((f=p[s])==null?void 0:f.label)??`layer ${s+1}`} at ${((j=r[s])==null?void 0:j.zoom)??""} magnification`,loading:"lazy",width:1280,height:960,className:"h-full w-full object-cover"}),e.jsxs("figcaption",{className:"absolute inset-x-0 bottom-0 px-3 py-1.5 text-[10px] tracking-[0.16em] uppercase",style:{fontFamily:i,color:`${o}dd`,background:"linear-gradient(0deg, rgba(2,8,12,0.9), transparent)"},children:["Fig. L0",s+1," · ",(v=r[s])==null?void 0:v.zoom]})]}),e.jsx("h3",{className:"text-xl mb-3",style:{fontFamily:m,color:"hsl(190,25%,96%)"},children:((w=p[s])==null?void 0:w.label)??`Layer ${s+1}`}),e.jsx("p",{className:"text-[15px] leading-relaxed",style:{fontFamily:m,color:"hsl(190,18%,84%)"},children:(($=p[s])==null?void 0:$.sentence)??"Content pending science review."}),e.jsxs("div",{className:"mt-5 space-y-2",children:[e.jsx(b,{label:"Scale",value:`${((N=r[s])==null?void 0:N.zoom)??""} · ${((k=r[s])==null?void 0:k.what)??""}`}),e.jsx(b,{label:"Metabolite",value:a.metaboliteClass}),e.jsx(b,{label:"Compound",value:a.compound.name})]}),e.jsxs("div",{className:"mt-5 flex gap-2",children:[e.jsx(z,{label:"◀ Previous layer",onClick:()=>y(h=>Math.max(0,h-1)),disabled:s===0}),e.jsx(z,{label:"Next layer ▶",onClick:()=>y(h=>Math.min(c-1,h+1)),disabled:s===c-1})]})]})]})}function b({label:a,value:x}){return e.jsxs("div",{className:"rounded-md px-3 py-2",style:{border:`1px solid ${t}1a`,background:"rgba(127,233,255,0.03)"},children:[e.jsx("div",{className:"text-[9px] uppercase tracking-[0.22em] mb-1",style:{fontFamily:i,color:`${t}88`},children:a}),e.jsx("div",{className:"text-[13px]",style:{fontFamily:m,color:"hsl(190,20%,88%)"},children:x})]})}function z({label:a,onClick:x,disabled:s}){return e.jsx("button",{onClick:x,disabled:s,className:"flex-1 rounded-full px-3 py-2 text-[10px] uppercase tracking-[0.18em] transition disabled:opacity-35",style:{fontFamily:i,color:s?`${t}66`:o,border:`1px solid ${s?`${t}22`:`${o}55`}`},children:a})}export{I as default};