// Editorial Agency Profile. // Full-width ledger → contained 4:5 hero → stats sheet → centred bio → // justified portfolio gallery (click to enlarge, video plays) → footer. function ProfileClinical({ model, tweaks }) { const rootRef = React.useRef(null); React.useEffect(() => { applyTheme(rootRef.current, tweaks); }, [tweaks]); const { hero, gallery, statsDensity, mediaCount } = tweaks; const media = model.media.slice(0, mediaCount); const heroItem = media[0]; const rest = media.slice(1); const stats = statsDensity === "minimal" ? model.stats.filter((s) => ["Age", "Height", "Cup size", "Dress", "Shoe", "Hair", "Eyes", "Based in", "Availability", "Travel"] .includes(s.k)) : model.stats; // ── Lightbox state — keyed off the FULL media list (incl. hero) so // clicking the hero also opens it as item 0. ── const lb = useLightbox(media); return (
{hero === "masthead" ? ( lb.open(0)}/> ) : hero === "split" ? ( lb.open(0)}/> ) : ( lb.open(0)}/> )} lb.open(restIdx + 1)} />
); } // ─── Top ledger ──────────────────────────────────────────────────────── function ClHeaderLedger({ model }) { return (
Talent {model.firstName} {model.lastName} Index 042 / 300 File EV-42 · R 26.05
); } function ClLedgerCell({ children, right }) { return (
{children}
); } function ClLK({ children }) { return {children}; } function ClLV({ children }) { return {children}; } // ─── Hero: contained 4:5 portrait, name overlay (DEFAULT) ────────────── // // The frame is height-bounded so the hero doesn't dominate the page — // it caps at ~84vh on tall screens, sits centred with bone-coloured // margins on the sides. Aspect stays 4:5 at all sizes. function ClHeroOverlay({ model, item, onOpen }) { // Pull a handful of vitals from the stats array so the bottom strip // shows real values from the registration form (no labels — the values // alone read as model vitals in context). const valueOf = (k) => model.stats.find((s) => s.k === k)?.v; const age = valueOf("Age"); const basedIn = valueOf("Based in"); const height = valueOf("Height"); return (
{/* Aspect-ratio + max-height conflict resolution: when max-height clamps, width naturally narrows because aspectRatio still binds. */} {/* Subtle bottom vignette so name + meta stay legible */}
{/* Name — lower-centre */}
{model.firstName.toUpperCase()}
{model.lastName.toUpperCase()}
{/* Bottom vitals strip — age · based in · height */}
{age} {basedIn} {height}
); } // ─── Hero: Masthead (name big above contained image) ─────────────────── function ClHeroMasthead({ model, item, onOpen }) { return (
{model.firstName.toUpperCase()}
{model.lastName.toUpperCase()}
); } // ─── Hero: Split ─────────────────────────────────────────────────────── function ClHeroSplit({ model, item, stats, onOpen }) { return (
File R-26.05 · 042 · {model.city}
{model.firstName.toUpperCase()}
{model.lastName.toUpperCase()}
{stats.slice(0, 8).map((s) => (
{s.k} {s.v}
))}
); } // ─── Stats sheet ─────────────────────────────────────────────────────── function ClStatsSheet({ stats }) { return (
{[stats.slice(0, Math.ceil(stats.length / 2)), stats.slice(Math.ceil(stats.length / 2))].map((col, ci) => (
{col.map((s) => )}
))}
); } function ClStatRow({ k, v, sub }) { return (
{k} {v} {sub || ""}
); } // ─── Section head ────────────────────────────────────────────────────── function ClSectionHead({ num, label, right }) { return (
— {num} {label}
{right && ( {right} )}
); } // ─── Bio ────────────────────────────────────────────────────────────── function ClBio({ model }) { return (
{model.bio}
— {model.firstName} {model.lastName}
); } // ─── Personality (free text from registration form) ──────────────────── // Visually distinct from Bio: italic, narrower column, smaller scale — // reads as a personal note rather than the professional artist statement. function ClPersonality({ model }) { if (!model.personality) return null; return (
“{model.personality}”
); } // ─── Gallery ─────────────────────────────────────────────────────────── function ClGallery({ items, layout, onOpen }) { const videoCount = items.filter((it) => it.kind === "video").length; const right = videoCount ? `${items.length} works · ${videoCount} ${videoCount === 1 ? "film" : "films"}` : `${items.length} works`; return (
{layout === "grid" ? : layout === "cinematic" ? : }
); } function ClJustified({ items, onOpen }) { const ref = React.useRef(null); const width = useElementWidth(ref); const target = items.length <= 4 ? 620 : items.length <= 7 ? 520 : items.length <= 11 ? 440 : 380; const gap = 8; // Tag each item with its index so it survives justifyRows's spread-clones // — the lightbox needs the rest-index back when a tile is clicked. const tagged = React.useMemo( () => items.map((it, idx) => ({ ...it, _idx: idx })), [items], ); const rows = width > 0 ? justifyRows(tagged, width, target, gap, 1.4) : []; return (
{rows.map((row, ri) => (
{row.items.map((it) => ( onOpen(it._idx)} /> ))}
))}
); } function ClGridStrict({ items, onOpen }) { return (
{items.map((it, idx) => ( onOpen(idx)} /> ))}
); } function ClCinematic({ items, onOpen }) { return (
{items.map((it, idx) => ( onOpen(idx)} /> ))}
); } // One figure. Either justified ({w, h}), strict grid (aspect + crop), or // cinematic (full = full width, natural aspect). function GalleryFig({ item, w, h, aspect, crop, full, onOpen }) { const styleProps = full ? { width:"100%" } : aspect ? { aspectRatio: aspect } : { width: w, height: h, flex: `0 0 ${w}px` }; return (
); } // Number-only caption — top-right corner, faint mono pill. function ClImageNumber({ n }) { return (
{String(n).padStart(2, "0")}
); } // ─── Footer — just the credit line ───────────────────────────────────── function ClFooter({ model }) { return ( ); } Object.assign(window, { ProfileClinical });