/* global React */ // YachtingStack — Yachting Simulation landing, recreated inside the storefront. // A deliberate COPY of the simulation app's public home (yachting-simulation → // apps/web/src/routes/home/HomeRoute.tsx + BenchmarkSummary.tsx), kept separate // and maintained in both places — the earlier iframe embed gave the page two // scrollers (double scrollbar), so the sections live natively in this document // and snap like the home page (product:simulation is a snapRoute in index.html). // KPI values are a static snapshot of the live tiles (2026-07-07), written // "N+" so they age gracefully; refresh them from simulation.yachtingstack.ai. const { Icon, Btn, Reveal } = window; const SIM_APP = "https://simulation.yachtingstack.ai"; // ---------- content (mirrors the sim app's HomeRoute data) ---------- const SIM_KPIS = [ { label: "Agents", value: "30+", sub: "30+ active · 100% ready", color: "#34D399" }, { label: "SOP library", value: "318", sub: "100% approved", color: "#D8A24A" }, { label: "Runs", value: "870+", sub: "scenario executions", color: "#5086B6" }, { label: "Decisions", value: "10,700+", sub: "agent turns recorded", color: "#9B7ED8" }, { label: "Protocol msgs", value: "4,400+", sub: "handoffs & escalations", color: "#33DCC4" }, { label: "Transactions", value: "11,100+", sub: "map replay ledger", color: "#E5634D" }, { label: "Vessels", value: "50", sub: "fleet records", color: "#5086B6" }, { label: "Benchmarks", value: "160+", sub: "runs scored across models", color: "#B894FF" }, ]; const SIM_WHY = [ ["FlaskConical", "Test the models", "Benchmark every frontier and open-weight LLM on real yachting work."], ["CircleDollarSign", "Test the costing", "Measure cost per season per model, so spend is known before production."], ["SlidersHorizontal", "Improve agent prompting", "Every run surfaces where prompts and procedures can be tightened."], ["Cpu", "Test with offline models", "Run the same workload against local, offline models — LM Studio or Ollama."], ["Database", "Synthetic training data", "Runs produce high-quality operational data to train our own models."], ["ShieldCheck", "De-risk before production","Prove agents and processes here before anything reaches a client."], ]; const SIM_INSIDE = [ ["FileText", "SOPs", "Standard operating procedures that emerge from repeated agent behaviour."], ["BarChart3", "Model benchmarks", "A quality · latency · cost leaderboard across every model tested."], ["Map", "Live fleet map", "Vessels moving through real ports as the charter season plays out."], ["MessagesSquare", "Protocol messages", "Every handoff and escalation agents exchange over the YachtingProtocol."], ["Activity", "Agent stats", "Per-agent activity, coverage and reliability across the roster."], ]; // Curated two-model showcase — same marketing values as the sim app's // BenchmarkSummary MODELS table; edit there and here together. const SIM_MODELS = [ { name: "Opus 4.7", color: "#5086B6", score: 0.94, min: 0.89, max: 0.97, latency: "3.1s", cost: "$12.40", success: 0.98, winner: true }, { name: "Kimi 2.7 Code", color: "#33DCC4", score: 0.88, min: 0.82, max: 0.92, latency: "4.8s", cost: "$2.10", success: 0.94, winner: false }, ]; // ---------- building blocks (sim app look, storefront tokens) ---------- // Full-height snap section — product:simulation is a snapRoute (index.html), so // the page scrolls one section per wheel like home / onboard / custom-dev / news. const SimSection = ({ children, bg, bgOpacity = 0.06, scrim = false, style = {} }) => (
{bg &&
); // Section heading — DM Sans light with the accent phrase in brand blue, // mirroring the sim app's SectionHead (storefront --font-ui IS DM Sans). const SimHead = ({ line1, accent, intro }) => (

{line1}{accent && <>
{accent}}

{intro &&

{intro}

}
); // Score-ring card — copy of the sim app's ScoreCard (BenchmarkSummary.tsx). function SimScoreCard({ m }) { const R = 34, C = 2 * Math.PI * R; const vitals = [ ["RANGE", `${Math.round(m.min * 100)}–${Math.round(m.max * 100)}%`], ["P50 LATENCY", m.latency], ["COST / SEASON", m.cost], ]; return (
{m.winner && ★}{m.name} {m.winner && ( WINNER )}
{Math.round(m.score * 100)}% SCORE
{vitals.map(([label, value]) => (
{label} {value}
))}
SUCCESS RATE {Math.round(m.success * 100)}%
); } // ---------- page ---------- function SimulationPage({ go }) { return (
{/* hover styles for the marketing cards (mirrors the sim app's .sim-why-card / .sim-inside-row in global.css) */} {/* 1 ── Hero + KPIs (one screen) — the world-map view behind, obscured */}

A living fleet, simulated — and every model{" "} benchmarked against it.

A multi-agent simulation of how a superyacht fleet really operates — 30+ specialist agents run complete charter seasons, and every decision is scored and recorded.

{SIM_KPIS.map((k) => (
{k.label}
{k.value}
{k.sub}
))}
{/* 2 ── Why we simulate — six icon cards */} One simulation, six reasons to run it.} />
{SIM_WHY.map(([icon, title, desc]) => (
{title}
{desc}
))}
{/* 3 ── What's inside — light teaser list */}
{SIM_INSIDE.map(([icon, title, desc]) => (
{title}
{desc}
))}
{/* 4 ── Model benchmarks — curated two-model score-card showcase */}
{SIM_MODELS.map((m) => )}
{/* 5 ── Request access — closing section over the "boarding" image; the suite footer follows in normal document flow (snap-foot). */}

Put the simulation to work
for your fleet.

Access is granted per operator. Tell us about your operation and we'll open the simulation and its benchmarks to you.

go("contact-sales")} iconRight="ArrowRight">Request access
); } Object.assign(window, { SimulationPage });