/* Dexilion — case study: BrokerBroker.
One page per case study; copy lives in SITE.caseStudies.brokerbroker. */
(function () {
const { Button } = window;
const {
Ico,
Grain,
Grid,
Eyebrow,
Shell,
tx,
isTodo,
SiteHeader,
PageHero,
ConversionBand,
SiteFooter,
} = window;
const CS = () => window.SITE.caseStudies.brokerbroker;
/* The mono particulars strip under the masthead — facts, not adjectives. */
function Facts() {
const c = CS();
return (
{c.facts.map((f, i) => (
{f.label}
{tx(f.value)}
))}
);
}
/* The recording sits directly under the masthead, then the framing prose at
the brand's 720px measure. One band, because they are one thought. */
function Opening() {
const c = CS();
const m = c.media;
/* The surface is the same either way — a still and a recording should sit
in the page identically. */
const frame = {
display: "block",
width: "100%",
height: "auto",
borderRadius: "var(--radius-surface)",
border: "1px solid var(--border-subtle)",
background: "var(--white)",
};
return (
{m.type === "video" ? (
/* Plays through once and holds on its last frame — the poster is
that same frame, so nothing jumps before or after. No loop. */
{c.intro.map((p, i) => (
{tx(p)}
))}
);
}
/* The four constraints as a ruled list — the brand's default for "here are
our N things". Numbered in mono, titled in serif, no card grid. */
function Constraints() {
const c = CS().constraints;
return (
{c.eyebrow}
{c.heading}
{tx(c.lede)}
{c.items.map((item, i) => (
{String(i + 1).padStart(2, "0")}
{tx(item)}
))}
{tx(c.note)}
);
}
function Approach() {
const a = CS().approach;
return (
{a.eyebrow}
{a.heading}
{a.body.map((p, i) => (
{tx(p)}
))}
{tx(a.quote)}
);
}
function Outcome() {
const o = CS().outcome;
const para = {
margin: "22px 0 0",
maxWidth: "56ch",
fontSize: "var(--fs-body-lg)",
lineHeight: "var(--lh-body)",
color: "var(--powder-500)",
textWrap: "pretty",
};
return (
{o.eyebrow}
{o.heading}
{o.body.map((p, i) => (
{tx(p)}
))}
{/* What the founder walked away with — hairline rows rather than
bullets, so it reads as a ledger and not a feature list. */}
{o.points && (
{o.points.map((p, i) => (
{tx(p)}
))}
)}
{o.close &&
o.close.map((p, i) => (
{tx(p)}
))}
{o.stats.map((s, i) => (
{tx(s.value)}
{tx(s.label)}
))}
{/* Until the store URL is filled in, this stays a placeholder
rather than a button that goes nowhere. */}
{o.link &&
(isTodo(o.link.href) ? (
{o.link.label} - {tx(o.link.href)}
) : (
{o.link.label}
))}
);
}
function Page() {
const c = CS();
return (
);
}
mountPage();
})();