/* global React, ReactDOM */
// YachtingStack — For Yachts page. Outcome-first; cloud/local de-emphasized.
// Full-height snap sections (like home), each anchored for the For Yachts mega-menu.
// Narrative order: what you get (hero) → see it work (agents showcase) →
// what it does for you (flow) → why not a generic chatbot (compare) → what it
// works from (iot) → how it connects (network) → how it lands aboard
// (deployment) → objections (trust) → cta.
// Mega-menu deep-links depend on these section ids: hero, agents, flow, compare,
// iot, network, deployment, trust, cta — keep them when editing.
const { Icon, Eyebrow, Btn, Reveal, DeploymentMap, DeviceShowcase, CompareGrid } = window;
// full-screen snap section — pass `bg` for a section-wide background image, and
// `top` to flow content from just below the nav (for tall sections that would
// otherwise clip when vertically centered).
const Snap = ({ children, id, top = false, style = {}, bg = null, bgOpacity = 0.14 }) => (
{bg && }
{children}
);
const Head = ({ children, style = {} }) => (
{children}
);
// The solution showcase — real product screenshots, one device at a time, in the
// shared DeviceShowcase mockups (atoms.jsx): a Desktop/Mobile toggle above the
// laptop / phone, auto-cycling captures from /assets/images/agents/showcase/,
// and a near-fullscreen lightbox over the unscaled originals.
function ShowcaseSection({ d }) {
return (
Your AI Agents, at work.
{d.showcaseBody[0]} {d.showcaseBody[1]}
);
}
// What is an AI agent? — explainer plus the shared generic-vs-dedicated grid
// (CompareGrid in atoms.jsx, also used by the AI Agents product page).
function CompareSection({ d }) {
const w = d.whatIs;
return (
What is an AI agent?
{w.body}
);
}
// One deployment step (Scope / Install / Sail).
function ProcessStep({ ic, t, desc, i }) {
return (
Step {i + 1}
{t}
{desc}
);
}
// One live-vessel-data feed chip — the card lifts and lightens on hover.
function FeedCard({ ic, t }) {
const [h, setH] = React.useState(false);
return (
);
}
// FAQ accordion row.
function Faq({ q, a, defaultOpen }) {
const [open, setOpen] = React.useState(!!defaultOpen);
return (
{open && (
{a}
)}
);
}
// Side dot-nav — one dot per full-height section, active one tracked via
// IntersectionObserver, click jumps straight to that section.
const ONBOARD_SECTIONS = [
{ id: "hero", label: "Overview" },
{ id: "agents", label: "See it work" },
{ id: "flow", label: "What it does for you" },
{ id: "compare", label: "What is an agent?" },
{ id: "iot", label: "Live vessel data" },
{ id: "network", label: "AI ecosystem" },
{ id: "deployment", label: "Deployment" },
{ id: "trust", label: "Trust" },
{ id: "cta", label: "Get Started" },
];
function DotNav({ go }) {
const [active, setActive] = React.useState("hero");
const [hovered, setHovered] = React.useState(null);
React.useEffect(() => {
const els = ONBOARD_SECTIONS.map((s) => document.getElementById(s.id)).filter(Boolean);
if (!els.length) return;
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => { if (e.isIntersecting) setActive(e.target.id); });
}, { threshold: 0.5 });
els.forEach((el) => io.observe(el));
return () => io.disconnect();
}, []);
const nav = (
);
// Rendered via portal straight into : the page wrapper's mount/route-change
// animation sets a transform on it, which turns position:fixed descendants into
// "fixed relative to that animated ancestor" instead of the viewport — so without
// this the nav silently scrolls away with the page instead of staying put.
return ReactDOM.createPortal(nav, document.body);
}
function OnBoard({ go }) {
const d = window.ONBOARD;
const feeds = [
["Compass", "Navigation & AIS"], ["Gauge", "Engines & propulsion"], ["Droplet", "Tanks & bilge"],
["BellRing", "Alarms & safety"], ["Zap", "Power & electrical"], ["Thermometer", "HVAC & climate"],
["Wind", "Weather & sea state"], ["Radio", "Comms & connectivity"]];
return (
{/* hero — yacht line-art background */}
AI Agents, deployed on board
{d.intro}
go("onboarding")} iconRight="ArrowRight">Get On Board
{/* the solution in action — laptop slideshow of agent deliverables */}
{/* what it does for you — outcomes, not plumbing (vertically centered) */}
What it does for you.
Less chasing, fewer spreadsheets, nothing left to memory. A specialist in every department turns the daily running of the vessel into outcomes you can see.
{/* checklist — mirrors the LinkedIn deck's benefits slide */}
{d.outcomeChecks.map((t, i) => (
{t}
))}
{d.outcomeKicker[0]}
{d.outcomeKicker[1]}
{/* what is an AI agent — generic chat vs a dedicated onboard solution */}
{/* IoT */}
Get more out of your yacht's data.
Onboard sensors and systems stream straight to your agents — navigation, engines, tanks, power and alarms — so advice and action are grounded in the vessel's real, current state.
{feeds.map(([ic, t], i) => (
))}
{/* yacht ⇄ shore network — reuse the exact same diagram as the home page */}
{/* deployment — cloud, local or both, plus the process */}
Cloud or Local — a bespoke implementation for your yacht.
From the lightest cloud setup to a full local installation, we scope and install around your vessel — new build or refit.
{d.tiers.map((t, i) => (
{/* yacht on top of each tier — illustration only, LOA is not a gate */}
{t.tag}
{t.range}
{t.body}
{t.points.map((p) => (
// bullet-style: icon pinned to the first line, text wraps under itself
{p}
))}
))}
{d.tiersNote}
{/* trust & control — FAQ (vertically centered) */}
You stay in command.
Straight answers to what owners and captains ask first.
{d.faq.map(([q, a], i) => )}
{/* CTA — passerelle boarding backdrop, same image as home's "deployed on board" section */}
Multiply your crew capabilities, not your headcount.
Tell us about your vessel and we'll scope the deployment — specialists, modules and the right mix of cloud and local.
go("onboarding")} iconRight="ArrowRight">Get On Board go("contact-sales")}>Talk to us
