);
}
// ---------- Count-up ----------
function useCountUp(target, run, dur = 1300) {
const [n, setN] = React.useState(0);
React.useEffect(() => {
if (!run) return;
if ((window.matchMedia && matchMedia("(prefers-reduced-motion: reduce)").matches) || document.hidden) { setN(target); return; }
let raf, start;
const step = (t) => { if (!start) start = t; const p = Math.min((t - start) / dur, 1);
setN(Math.round((1 - Math.pow(1 - p, 3)) * target)); if (p < 1) raf = requestAnimationFrame(step); };
raf = requestAnimationFrame(step); return () => raf && cancelAnimationFrame(raf);
}, [target, run, dur]);
return n;
}
// ---------- CTA text ----------
// One fixed label so every CTA button across the site says the same thing.
// (Was a wall-clock rotation; the hook name survives so call sites stay put.)
const CTA_WORDS = ["Get On Board"];
function useRotatingCTA() {
return CTA_WORDS[0];
}
// ---------- Generic-AI vs dedicated-agents comparison grid ----------
// Shared by For Yachts and the AI Agents product page. `w` is a whatIs spec:
// either { cols: [{ label, sub? }...], rows: [[label, ...marks]] } for N
// comparison columns, or the legacy 2-column shape { generic, genericSub,
// dedicated, rows: [[label, g, a]] }. Marks are "yes" | "partial" | "no";
// the LAST column is always the YachtingStack one and carries the tint band.
// Headers lean via the cmp-* classes (22° desktop, 45° phones) so the mark
// columns stay narrow no matter how many there are.
const CMP_MARKS = {
yes: { ic: "Check", c: "var(--good)", label: "Yes" },
partial: { ic: "Minus", c: "var(--warn)", label: "Partly" },
no: { ic: "X", c: "var(--bad)", label: "No" },
};
function CmpMark({ v }) {
const m = CMP_MARKS[v] || CMP_MARKS.no;
return ;
}
function CompareGrid({ w }) {
const cols = w.cols || [{ label: w.generic, sub: w.genericSub }, { label: w.dedicated }];
const lastCol = cols.length - 1;
const lastRow = w.rows.length - 1;
const tint = { background: "rgba(80,134,182,.07)", borderLeft: "1px solid rgba(80,134,182,.26)", borderRight: "1px solid rgba(80,134,182,.26)" };
const markCell = { display: "flex", alignItems: "center", justifyContent: "center", padding: "13px 8px" };
return (
<>
{/* header row */}
{/* header cells stay untinted — the highlight band starts at the first
mark row (a tinted box around the leaning label read as a glitch) */}
{cols.map((c, ci) => (
{c.label}
{c.sub && {c.sub}}
))}
{w.rows.map(([label, ...marks], i) => (
{label}
{marks.map((m, ci) => (
))}
))}
{w.legend}
);
}
// ---------- Device mockups (shared by the Agents product page and For Yachts) ----------
// One device screen: tries the real screenshot first and falls back to a quiet,
// gridded placeholder while the asset doesn't exist yet — drop the file at the
// spec'd path and the screen fills itself, no code change needed.
// `fit` — "cover" (default) crops to fill the screen; "contain" letterboxes the
// whole capture; "none" renders the capture at its native 1:1 pixel size,
// cropped to the frame (use for readability at actual display size).
// `position` overrides the crop/letterbox anchor.
function AgScreen({ src, alt, label, icon, fit = "cover", position = null }) {
const [state, setState] = React.useState("loading"); // loading | ok | missing
return (
);
}
// CSS-drawn laptop frame. Pass `shot` for a single screenshot screen, or
// `children` to render custom screen content (e.g. a slideshow) instead.
// `aspect` overrides the lid's aspect ratio — set it to the screenshot's own
// ratio so full-page captures display uncropped.
function AgLaptop({ shot, children, aspect = "16 / 10.2" }) {
return (
{/* lid + screen */}
{children || }
{/* periodic sheen sweeping across the glass */}
{/* deck */}
);
}
// CSS-drawn phone frame. Same contract as AgLaptop: `shot` or `children`.
function AgPhone({ shot, children }) {
return (
{children || }
{/* island */}
);
}
// ---------- Solution showcase (shared by For Yachts and the Agents product page) ----------
// Real product captures inside the laptop / phone mockups, one device at a time.
// A small Desktop/Mobile toggle sits above the mockup; the laptop letterboxes the
// ~1915x940 desktop captures uncropped (framed by a simulated browser bar and
// system bar), the phone insets the mobile captures below the camera island so
// the app header isn't hidden. Cycling only runs while the block is on screen
// (never under reduced motion) and pauses on hover; clicking opens a
// near-fullscreen lightbox over the unscaled originals in `${dir}/full/`.
// Missing files fall back to AgScreen's gridded placeholder, so entries can be
// spec'd before their captures land. Below 820px the toggle hides and the phone
// carries the block alone (see the .showcase-* rules in index.html).
const prefersReducedMotion = () => window.matchMedia && matchMedia("(prefers-reduced-motion: reduce)").matches;
// Hover cover for the showcase mockups — a designed affordance in place of the
// browser's zoom-in cursor: the screen dims softly and a centered chip invites
// the click. pointer-events stay off so the click falls through to the mockup.
function EnlargeCover({ show }) {
return (
Click to enlarge
);
}
function DeviceShowcase({ desk, mob, dir = "/assets/images/agents/showcase", domain = "agents.yachtingstack.ai" }) {
const [device, setDevice] = React.useState("desktop"); // desktop | mobile
const [di, setDi] = React.useState(0);
const [mi, setMi] = React.useState(0);
const [paused, setPaused] = React.useState(false);
const [inView, setInView] = React.useState(false);
const rootRef = React.useRef(null);
// live clock for the simulated system bar
const [now, setNow] = React.useState(() => new Date());
React.useEffect(() => {
const id = setInterval(() => setNow(new Date()), 30000);
return () => clearInterval(id);
}, []);
const clock = now.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
const clockDate = now.toLocaleDateString([], { weekday: "short", day: "numeric", month: "short" });
// On phone-width viewports the CSS pins the phone mockup regardless of the
// toggle state — the lightbox must follow what's actually on screen, or a
// tap on the phone would open the DESKTOP captures.
const [phoneVp, setPhoneVp] = React.useState(() => !!(window.matchMedia && matchMedia("(max-width: 820px)").matches));
React.useEffect(() => {
const mq = matchMedia("(max-width: 820px)");
const on = () => setPhoneVp(mq.matches);
mq.addEventListener("change", on);
return () => mq.removeEventListener("change", on);
}, []);
const effDevice = phoneVp ? "mobile" : device;
// lightbox — click a mockup to view the capture near-fullscreen; chevrons
// navigate the active device's set, X / Escape / backdrop click close it.
const [lightbox, setLightbox] = React.useState(false);
const lbList = effDevice === "desktop" ? desk : mob;
const lbIdx = effDevice === "desktop" ? di : mi;
const lbStep = (step) => (effDevice === "desktop" ? setDi : setMi)((x) => (x + step + lbList.length) % lbList.length);
React.useEffect(() => {
if (!lightbox) return;
const onKey = (e) => {
if (e.key === "Escape") setLightbox(false);
else if (e.key === "ArrowRight") lbStep(1);
else if (e.key === "ArrowLeft") lbStep(-1);
};
window.addEventListener("keydown", onKey);
const prevOverflow = document.documentElement.style.overflow;
document.documentElement.style.overflow = "hidden";
return () => { window.removeEventListener("keydown", onKey); document.documentElement.style.overflow = prevOverflow; };
}, [lightbox, device]);
const lbBtn = { position: "absolute", zIndex: 2, display: "flex", alignItems: "center", justifyContent: "center", padding: 0,
width: 44, height: 44, borderRadius: "50%", cursor: "pointer", border: "1px solid var(--hairline-2)",
background: "rgba(13,22,38,.85)", color: "var(--ink-2)", transition: "border-color .2s, color .2s" };
React.useEffect(() => {
const el = rootRef.current;
if (!el) return;
const io = new IntersectionObserver(([e]) => setInView(e.isIntersecting), { threshold: 0.25 });
io.observe(el);
return () => io.disconnect();
}, []);
React.useEffect(() => {
if (!inView || paused || lightbox || prefersReducedMotion()) return;
const a = setInterval(() => setDi((x) => (x + 1) % desk.length), 4000);
const b = setInterval(() => setMi((x) => (x + 1) % mob.length), 3400);
return () => { clearInterval(a); clearInterval(b); };
}, [inView, paused, lightbox, desk.length, mob.length]);
const deskLayers = desk.map(([file, label], i) => (
{/* whole capture visible; files are pre-resampled to 2x the display size for crispness */}
));
const mobLayers = mob.map(([file, label], i) => (
// #0B111E = the app's own background (sampled from the captures) so the
// status-bar strip above the screenshot blends seamlessly
{/* content starts below the camera island — the strip above reads as a status bar */}
));
return (
{/* device toggle — centered above the mockup; hidden on mobile where the phone is forced */}
{/* simulated system bar — clock in the corner */}
{/* same asset as the site header (the .svg in /assets/logo is an old gold variant — don't use it) */}
{["Bot", "Inbox", "LayoutDashboard"].map((ic) => (
))}
{clock}{clockDate}
YachtingStack
![{lbList[lbIdx][1]}]({`${dir}/full/${lbList[lbIdx][0]}.png`})
e.stopPropagation()}
style={{ maxWidth: "90vw", maxHeight: "82vh", width: "auto", height: "auto", borderRadius: 10,
border: "1px solid var(--hairline-2)", boxShadow: "0 40px 120px -30px rgba(0,0,0,.95)" }} />