{/* Action row, IG icons */}

{/* Engagement counts */}

110 likes

Sent 42× Reposted 6×

{/* Caption */}

yachtway Skip the Miami traffic onboard a Skipper. Find it on YachtWay.

); } // ─── Mock 02, Google mobile SERP. Ultra-compact result cards, mobile // search bar at top, no sidebar. function MMSearch({ active, A }) { return ( {/* Mobile Google bar */}

yachts for sale ×

{/* Tab strip */}

{[["All", true], ["Images"], ["Videos"], ["News"], ["Maps"]].map(([t, a], i) => ( {t} ))}

{/* Results */}

{[ { yw: false, host: "yachtworld.com", title: "Yachts for Sale - YachtWorld", desc: "Find new and used yachts for sale on YachtWorld." }, { yw: true, host: "yachtway.com", title: "Yachts for Sale · 2,900+ listings", desc: "The category-leading marketplace for yachts. Filter 2,900+ listings worldwide." }, { yw: false, host: "iyc.com", title: "Luxury Yachts for Sale", desc: "Over 550 Luxury Yachts and access to all yachts globally." }, ].map((r, i) => (

{r.yw ? "Y" : r.host[0].toUpperCase()}

{r.host.split(".")[0]}

{r.host} ›

{r.title}

{r.desc}

))}

); } // ─── Mock 03, YachtWay mobile marketplace. Single-column cards stacked // vertically (the desktop 3-col grid doesn't fit on phone). function MMMarketplace({ active, A, T, tint }) { const listings = (window.__YW_ASSETS && window.__YW_ASSETS.listings) || {}; const yachts = [ { name: "Westport 130", price: "$23.7M", year: "2022", loc: "Bahamas", badge: "live", photo: "westport" }, { name: "Benetti 125", price: "$13.8M", year: "2024", loc: "Monaco", badge: "event", photo: "benetti" }, { name: "Vanquish VQ70", price: "$7.8M", year: "2025", loc: "Antibes", photo: "vanquish" }, ]; return ( {/* App header */}

YachtWay

{/* Filter chips horizontal scroll */}

{["All", "60-90ft", "1M+", "2023-25", "Monaco"].map((c, i) => ( {c} ))}

{/* Listings */}

{yachts.map((y, i) => (

{y.badge === "live" && (

Live

)} {y.badge === "event" && (

FLIBS

)} {/* Heart icon */}

{/* Top row, vessel name on the left, price prominent on the right. Both at the same baseline so the eye reads "Westport 130, €21.9M" as a single line. */}

{y.name}

{y.price}

{/* Spec row, year + make/model + location, all in one row with bullet separators. Year and make get extra weight so the spec scans even at small sizes. */}

{y.year} · {y.name.split(" ")[0]} · {y.loc}

))}

); } // ─── Mock 04, Mobile broker chat (single conversation full-bleed, // no sidebar). The desktop version had a 3-pane layout; on phone // messaging apps show ONE conversation at a time. function MMBroker({ active, A, T, tint }) { return ( {/* Chat header */}

James Whitmore

● Online

{/* Messages */}

Today · 11:24

Hi - saw the walkthrough on YouTube last night. Sent a request for viewing.

Princess Y85, Monaco. Saturday work?

Yes - confirmed. See you Saturday 11AM.

Read · 11:25

{active && (

{[0, 1, 2].map((i) => ( ))}

)}

{/* Input */}

Reply…

); } // ─── Mock 05, Mobile e-sign. Document above, signature pad below // (the desktop 1fr/240px split would be unusable on phone). function MMClose({ active, A, T, tint }) { const [signed, setSigned] = React.useState(false); React.useEffect(() => { if (!active) { setSigned(false); return; } const id = setTimeout(() => setSigned(true), 1400); return () => clearTimeout(id); }, [active]); return ( {/* Top bar with X + title */}

Purchase Agreement

SP-2841

EasySign

{/* Document preview */}

Princess Y85 · 2024

{[100, 92, 96, 70, 100, 88].map((w, i) => (

))}

{/* Signature blocks stacked */}

{[ { who: "BUYER", name: "James Whitmore", font: "'Mrs Saint Delafield', 'Allura', cursive", fs: 24, rot: -2, signed: signed }, { who: "BROKER", name: "S. Marchetti", font: "'Homemade Apple', 'Caveat', cursive", fs: 16, rot: -1, signed: true }, ].map((b, i) => (

{b.who}

{b.signed && (

Signed

)}

{b.name}

))}

); } // ─── Mock 04, Phone-native YachtWay LIVE. Tall hero with the broadcast // frame on top (REC pill, viewer count, scrolling Q&A), bottom rail // with the listing CTA. Same idiom as desktop MockLive but stacked. function MMLive({ active, A, T, tint }) { const [viewers, setViewers] = React.useState(127); const [chatIdx, setChatIdx] = React.useState(0); React.useEffect(() => { if (!active) return; const v = setInterval(() => { setViewers((c) => Math.max(80, Math.min(220, c + (Math.random() < 0.55 ? 1 : -1) * Math.ceil(Math.random() * 3)))); }, 800); const c = setInterval(() => setChatIdx((i) => i + 1), 2000); return () => { clearInterval(v); clearInterval(c); }; }, [active]); const CHAT = [ { who: "Marcus T.", msg: "What's the cruising range?", role: "buyer" }, { who: "Sofia R.", msg: "Show me the engine room?", role: "buyer" }, { who: "YachtWay", msg: "Heading down now, full tour next.", role: "host" }, { who: "Kenji M.", msg: "Trim tabs standard?", role: "buyer" }, ]; const visible = []; for (let i = 0; i < 3; i++) visible.push(CHAT[(chatIdx + i) % CHAT.length]); return (

{/* ── Broadcast hero ── */}

{/* horizon line */}

{/* yacht */} {/* REC pill */}

LIVE

{/* Viewer count */}

{viewers}

{/* Listing strap */}

Now showing

Princess Y85 · €5.2M

{/* ── Q&A ── */}

Live Q&A · {viewers} buyers

{visible.map((m, i) => { const isHost = m.role === "host"; const initials = m.who.split(" ").map(p => p[0]).join("").slice(0, 2); return (

{initials}

{m.who}{isHost && Host}

{m.msg}

); })}

); } // Dispatcher, picks the right mobile mock per stage kind. function BuyerJourneyMobileMock({ kind, T, A, tint, active }) { switch (kind) { case "social": return ; case "search": return ; case "marketplace": return ; case "live": return ; case "broker": return ; case "close": return ; // "watch" isn't currently in the stages array, but cover it anyway as broker fallback case "watch": return ; default: return null; } } Object.assign(window, { BuyerJourneyMobileMock });