/* ============================================================
* THE SYSTEM, IN 6, sits right under the hero
* Knowledge Base · Channels · CRM · CDP · Campaigns & Journeys · Loyalty
* ============================================================ */
const restCards = [
{
title: "Knowledge Base",
promise: "The hotel's brain, every fact, every property, in any language.",
bullets: [
"Deep crawl across website, booking engine, PDFs, PMS, and Drive.",
"Group + per-property AI stores, dedup'd and continuously updated.",
],
href: "platform/knowledge.html",
visual: "kb",
},
{
title: "Channels",
promise: "Every guest conversation, on every channel, in one shared inbox.",
bullets: [
"WhatsApp, Web Chatbot, Meta Socials, Voice, and email in both directions.",
"One AI agent across all of them, with one history and one logic.",
],
href: "platform/inbox.html",
visual: "channels",
links: [
{ href: "platform/inbox.html", label: "Inboxes" },
{ href: "platform/voice.html", label: "Voice Agent" },
],
},
{
title: "CRM",
/* Two sides now, so the card leads with the split rather than
describing only the guest one. Same shape as Channels above: the
links carry the two destinations and the card itself stops being a
single anchor. */
promise: "One CRM for the guests who stay and the accounts that send them.",
bullets: [
"B2C: every guest profile anchored to real reservations, across every channel.",
"B2B: agencies, tour operators and corporate accounts, with the bookings they produced attributed to them.",
],
href: "platform/crm.html",
visual: "crm",
links: [
{ href: "platform/crm.html", label: "B2C CRM" },
{ href: "platform/crm-b2b.html", label: "B2B CRM" },
],
},
{
title: "CDP",
promise: "One guest, even when your PMS says otherwise.",
bullets: [
"Automatic deduplication across heterogeneous PMS instances.",
"Anonymous contacts promoted to CRM the moment they're reachable.",
],
href: "platform/cdp.html",
visual: "cdp",
},
{
title: "Campaigns & Journeys",
promise: "Email and WhatsApp campaigns plus omnichannel automation.",
bullets: [
"Pre-stay, in-stay, and post-stay journeys triggered by real booking data.",
"AI-assisted templates and visual editors for both channels.",
],
href: "platform/journeys.html",
visual: "campaigns",
},
{
title: "Loyalty",
promise: "A loyalty engine sophisticated enough for any hotel group.",
bullets: [
"Rule-based tiers, points, and benefits, modeled for the largest groups.",
"Fully integrated with PMS and booking engines, in real time.",
],
href: "platform/loyalty.html",
visual: "loyalty",
},
];
/* ------------------------------------------------------------------
* The six diagrams.
*
* Each one performs ITS OWN idea, and only while its card is hovered.
* The motifs are deliberately different — radial ingestion, flow along
* paths, rows revealing depth, convergence, traversal, progressive fill —
* so six cards on one screen do not read as one template repeated.
*
* At rest every diagram is completely still, and still composed: nothing
* is mid-flight, half-drawn or frozen. Everything animating is either a
* transition back to its rest value, or a looping element that is
* opacity:0 when not hovered, so a paused frame is never visible.
*
* Hover is the trigger, but :focus-within matches it — a keyboard user
* tabbing to the card's link gets the same thing. Under
* prefers-reduced-motion the whole layer resolves to its END state
* instantly, so the meaning survives without the movement.
* ------------------------------------------------------------------ */
const RestVisual = ({ kind }) => {
/* KNOWLEDGE — radial ingestion. Sources sit apart and the brain is
empty; on hover the feeds draw inward and the core fills. */
if (kind === "kb") return (
);
/* CHANNELS — flow along paths. Six lines, no traffic at rest; on hover
a message runs each one into the inbox and the inbox answers. */
if (kind === "channels") {
const chans = [
{ y: 11, c: "var(--c-whatsapp)", l: "WHATSAPP" },
{ y: 22, c: "var(--c-instagram)", l: "SOCIAL" },
{ y: 33, c: "var(--c-email)", l: "EMAIL" },
{ y: 45, c: "var(--c-booking)", l: "BOOKING" },
{ y: 56, c: "var(--c-voice)", l: "VOICE" },
{ y: 67, c: "var(--c-web)", l: "WEB" },
];
return (
);
}
/* CRM — rows revealing depth. Three plain guest rows; on hover each
opens to show the real bookings the profile is anchored to. */
if (kind === "crm") return (
);
/* CDP — convergence. Three near-duplicate records, misaligned and
spelled differently; on hover they slide together into one. */
if (kind === "cdp") return (
);
/* JOURNEYS — traversal. A quiet timeline; on hover a marker walks
pre → stay → post and lights each touchpoint as it passes. */
if (kind === "campaigns") {
const path = "M 12 52 C 46 52, 46 30, 76 30 S 118 54, 146 54 S 178 34, 190 34";
return (
);
}
/* LOYALTY — progressive fill. Four empty tiers; on hover they fill in
sequence and platinum lands in brand fuchsia. */
if (kind === "loyalty") return (
);
return null;
};
const SectionRest = () => (
The platform
Everything a hotel group needs, in one platform.
Six layers of the system, all sharing the same intelligence and the same data, so guest context never gets lost between teams or tools.