/* global React */ const { useState: useDetailState, useEffect: useDetailEffect } = React; /* EU price format: 19.95 -> "19,95 €" */ const eur = (n) => Number(n).toFixed(2).replace(".", ",") + " €"; function StrainDetail({ strain, onClose, onAdd }) { const open = !!strain; const [pack, setPack] = useDetailState(2); const [zoom, setZoom] = useDetailState(false); // Reset pack selection to the best-value option whenever a new strain opens. useDetailEffect(() => { if (strain) setPack((strain.packs || []).findIndex(p => p.best) || 2); setZoom(false); }, [strain]); // Lock scroll + Esc to close. useDetailEffect(() => { if (!open) return; const prev = document.body.style.overflow; document.body.style.overflow = "hidden"; const onKey = (e) => { if (e.key === "Escape") onClose(); }; window.addEventListener("keydown", onKey); return () => { document.body.style.overflow = prev; window.removeEventListener("keydown", onKey); }; }, [open, onClose]); const s = strain || {}; const out = !!s.unavailable; // not in stock — dash prices, grey add const packs = s.packs || []; const sel = packs[pack] || packs[0] || { price: s.price }; // Portal to : the hero section creates 3D/perspective stacking contexts, // so rendering in place lets later siblings (marquee, trays) paint OVER the // fixed modal. From document.body, z-index 400 genuinely wins. return ReactDOM.createPortal(
{open && (
{/* LEFT — buy side */}
{s.drop} · {s.name}

{s.name}

{s.lineage}

Gender{s.gender}
Flowering{s.flowering}
Yield{s.yield}
THC{s.thc}
Traits{s.traits}
Terpene profile
{(s.terps || []).map(t => {t})}
Choose pack
{packs.map((p, i) => ( ))}
{/* RIGHT — about side */}
{(s.about || []).map((p, i) =>

{p}

)} {s.family ? (
Lineage
{[s.family.parents[0], null, s.family.parents[1]].map((par, idx) => par === null ? : (
{par.kids[0]} {par.kids[1]}
{par.bank} {par.name} {par.bank}
) )}
{s.family.child} Satocrop · {s.drop}
) : (
Lineage
{(s.parents || []).map((par, i) => (
))}
{s.name} Satocrop · {s.drop}
)}
)}
{zoom && (
setZoom(false)} role="dialog" aria-label={`${s.name} full image`}> {s.name}
)}
, document.body ); } window.StrainDetail = StrainDetail;