);
function RelatedCard({ p, go }) {
return (
);
}
// ---------------- Custom Development — dedicated narrative page ----------------
// Renders the structured spec at window.CUSTOM_DEV_PAGE (hero + ordered blocks +
// closing). Block types: lead | pillars | contrast | timeline | leverage | governance.
// accent may be a single phrase or an array of phrases; each occurrence is tinted.
function AccentText({ text, accent }) {
const accents = (Array.isArray(accent) ? accent : [accent]).filter(Boolean);
if (!accents.length) return text;
const out = [];
let rest = text, k = 0;
while (rest.length) {
let at = -1, hit = null;
for (const a of accents) {
const idx = rest.indexOf(a);
if (idx !== -1 && (at === -1 || idx < at)) { at = idx; hit = a; }
}
if (at === -1) { out.push(rest); break; }
if (at > 0) out.push(rest.slice(0, at));
out.push({hit});
rest = rest.slice(at + hit.length);
}
return <>{out};
}
const cdSection = (children, style = {}, bg = null, bgOpacity = 0.14, scrimX = "30%", bgFilter = null, bgSize = "cover", bgMask = null) => (
{bg && }
{/* local scrim under the text column — the wireframe strokes are bright white
and run straight through the grey body copy without it */}
{bg && }
);
}
// Quiet two-column ruled list — used by the governance block so the page's last
// content section breaks the card rhythm instead of repeating it a third time.
function CDListRow({ icon, title, desc }) {
const [h, setH] = React.useState(false);
return (
);
}
// Horizontal stage timeline — a connecting track with numbered nodes, chevrons
// between stages, and a discreet cyan pulse that flows to the right along the track.
function CDTimeline({ steps }) {
const n = steps.length;
return (
{/* connecting track between the first and last node centres */}
{/* chevrons at the mid-points between nodes */}
{Array.from({ length: n - 1 }).map((_, i) => (
))}
{/* discreet pulse flowing to the right, ducking behind each node */}
{/* stages */}
{steps.map(([marker, title, desc], i) => (
{String(i + 1).padStart(2, "0")}
{marker}
{title}
{desc}
))}
);
}
// Vertical bullet list — a centered, ruled column used where a block wants its
// points read as a list rather than a grid of cards.
// One bullet row — hover nudges it across and lights up its icon.
function CDBulletRow({ icon, title, desc, first }) {
const [h, setH] = React.useState(false);
return (
);
}
function CDBlock({ block }) {
const alt = block.type === "contrast" || block.type === "leverage";
// Two-column split: heading + single paragraph on the left, bullets on the right.
if (block.layout === "split") {
return cdSection(
);
}
// ---------------- Yachting AI Agents — dedicated narrative page ----------------
// Renders window.AGENTS_PAGE: a passerelle hero that blends into the body via a
// tall gradient, the same auto-cycling laptop + phone showcase as For Yachts
// (DeviceShowcase, atoms.jsx — captures in /assets/images/agents/showcase/),
// three capability sections (integration / intelligence / leverage) and a
// closing CTA. No eyebrows on this page — the headings carry the accent alone.
// Like home / custom dev / news / simulation, the page scroll-snaps section by
// section (route listed in index.html's snapRoute): every section must be a
// full-height .snap-sec — a short strip between two snap stops is unreachable
// under mandatory snapping, which is why "More on shore" lives inside the
// closing CTA screen instead of standing alone.
function AgHead({ headline, accentWord, body, align = "left", max = 640 }) {
const centered = align === "center";
const m = centered ? "auto" : 0;
return (
{(body || []).map((para, i) => (
{para}
))}
);
}
// Corpus → agents flow: two nodes joined by a track that carries the same
// travelling pulse as the Custom Development timeline.
function AgFlow({ flow }) {
const node = ([icon, title, sub], delay) => (
{/* 1 ── hero — the passerelle boarding image (same as home / custom dev),
dissolving into the body through a tall bottom gradient. NOT cd-sec:
that class drops the 100vh floor on mobile, and a landing hero must
fill the first screen there — .ag-hero restores it (index.html). */}
{/* the gradient hand-off into the sections below */}
{/* 2 ── the solution showcase — the same auto-cycling laptop / phone
mockups as For Yachts, top-anchored like there so the heading stays
above the fold when the section snaps in */}
{pInner(
<>
)}
{/* 3 ── integration — text left, bullet rows right, over a faint office image */}
{pInner(
)}
{/* 3.5 ── why not a generic chatbot — the same comparison grid as For
Yachts, with business-flavoured rows (spec.whatIs) */}
{pInner(
<>
)}
{/* 4 ── yachting intelligence — cards + corpus→agents flow */}
{pInner(
<>
{/* one 4-card row, not 2×2 — the section must fit a 768px-tall snap
viewport with the corpus→agents flow still above the fold */}
)}
{/* 5 ── leverage — stats left, platform-foundation cards right */}
{pInner(
{spec.leverage.stats.map(([n, label]) => (
{n}
{label}
))}
)}
{/* 6 ── closing CTA + more on shore — one full-height snap stop: a short
related-cards strip can't rest between two mandatory snap sections,
so it rides at the bottom of the closing screen instead */}
{/* softly blurred so it sits as quietly as the other section backdrops;
the negative inset hides the blur's transparent edge bleed */}
);
}
// ---------------- Simulation — public KPI + Model Benchmark sections ----------------
// Rendered on any product whose data carries `kpis` / `benchmark` (today: simulation).
// Replicates the simulator's Simulation-page KPI surface and Models page so the
// numbers are visible without login.
function SimKpiSection({ kpis }) {
return (
{pInner(
Key KPIs — the live simulation page
Fourteen numbers, tracked on every run.
{kpis.note}
{kpis.items.map(([label, value, unit, color, explain]) => (
)}
);
}
// ---------------- Embedded subdomain landing ----------------
// For products whose data carries `embedUrl`, the product body IS the live
// subdomain's marketing landing, iframed in headerless (?embed=1). The suite
// header (chrome.jsx) sits above, and we keep a back link, the "More on shore"
// related cards and the site footer around it — so the copy is maintained once
// in the subdomain app and stays in sync here automatically.
function EmbeddedProductPage({ go, p, backRoute, backLabel, related }) {
// Start a little taller than one viewport to avoid a visible grow-in; the
// frame reports its true height on load and on every resize (see the
// reportEmbedHeight handshake in the visibility app's landing).
const [height, setHeight] = React.useState(2400);
const frameOrigin = React.useMemo(() => {
try { return new URL(p.embedUrl).origin; } catch { return null; }
}, [p.embedUrl]);
React.useEffect(() => {
function onMessage(e) {
// Only trust height messages from the embedded subdomain itself.
if (frameOrigin && e.origin !== frameOrigin) return;
const d = e.data;
// Suite-wide height handshake — any embedded app (yv-/ys-/… -embed-height).
if (d && typeof d.type === "string" && d.type.endsWith("-embed-height") && typeof d.height === "number" && d.height > 0) {
setHeight(Math.ceil(d.height));
}
}
window.addEventListener("message", onMessage);
return () => window.removeEventListener("message", onMessage);
}, [frameOrigin]);
return (
{/* "On shore" back link — a plain, borderless text link sitting right below
the header wordmark: same centered 1240 / 32px gutter as the nav, so its
arrow lines up under the logo at any width. Scrolls away with the page.
NOTE: `all:unset` must come BEFORE the positioning props on the button,
or it resets position back to static. */}
{/* the live subdomain landing, headerless — starts at the very top so its
hero image bleeds up behind the transparent suite header (chrome.jsx). */}
{/* related — native suite framing around the embed */}
{pInner(
More on shore
{related.map((rp) => )}
)}
);
}
function ProductPage({ go, productKey, from }) {
const ctaText = useRotatingCTA();
const backRoute = "home";
const backLabel = "Home";
const PRODUCTS = window.PRODUCTS || {};
const p = PRODUCTS[productKey] || PRODUCTS.custom;
const related = (["custom", ...window.ONSHORE_MENU]).filter((k) => k !== p.key).map((k) => PRODUCTS[k]);
const [lightbox, setLightbox] = React.useState(null);
// Custom Development gets its own dedicated narrative page. Gate on the
// RESOLVED key so stale/unknown route keys (restored from localStorage after
// a rename) land on the narrative page, not the deprecated generic layout.
if (p.key === "custom" && window.CUSTOM_DEV_PAGE) {
return ;
}
// Yachting AI Agents gets its own dedicated narrative page too.
if (p.key === "agents" && window.AGENTS_PAGE) {
return ;
}
// Products that surface their live subdomain landing (e.g. visibility) embed
// it in place of the generic layout, keeping the suite chrome around it.
if (p.embedUrl) {
return ;
}
return (
)}
{/* simulation: live KPIs + public model benchmark (no login needed) */}
{p.kpis && }
{p.benchmark && }
{/* screenshots */}
{p.screenshots && p.screenshots.length > 0 && (
{pInner(
See it in action
{p.screenshots.map((s, i) => (
))}
)}
)}
{/* related */}
{pInner(
More on shore
{related.map((rp) => )}
)}
{/* CTA */}
Deploy {p.name} with us.
It starts with onboarding — we map your operation and deploy what fits, under your supervision.
![{p.screenshots[lightbox].alt}]({p.screenshots[lightbox].src})
{p.screenshots.length > 1 && (
<>
)}