// Guestmaker · Contact Data showcase · interactive product preview that sits
// beneath the Hotel CRM hero. All 7 tabs are functional. Fuchsia-coherent palette.
// All names, emails, hotels and reservations are fictional seed data.

const { useState: cUseState, useEffect: cUseEffect, useRef: cUseRef, useMemo: cUseMemo } = React;

// ────────────────────────── tokens ──────────────────────────
const C_FUCHSIA      = "#ED4D86";
const C_FUCHSIA_DEEP = "#C93A6B";
const C_FUCHSIA_DARK = "#8E2148";
const C_FUCHSIA_SOFT = "#F8B7CF";
const C_FUCHSIA_PALE = "#FCE4EE";
const C_FUCHSIA_WASH = "#FDF0F5";
const C_PLUM         = "#211A22";
const C_PLUM_DEEP    = "#160F17";

const C_INK     = "#1a1a1a";
const C_INK_SOFT= "#3a2f33";
const C_DIM     = "#6e6363";
const C_FAINT   = "#a99fa3";
const C_RULE    = "#e9e3d4";
const C_RULE_S  = "#f0ebde";
const C_PAPER   = "#fbfaf6";
const C_CREAM   = "#f6f4ef";
const C_SURFACE = "#ffffff";

// Semantic states (all fuchsia/plum tints, no green or amber).
const C_OK     = C_FUCHSIA;        // active / confirmed
const C_PAST   = C_FUCHSIA_DARK;   // checked-out / completed
const C_HOLD   = C_PLUM;           // scheduled / pending
const C_OFF    = C_PLUM_DEEP;      // cancelled / off
const C_DANGER = "#7A1F3A";        // deep wine for destructive actions
const C_OK_BG  = C_FUCHSIA_WASH;
const C_PAST_BG= "#F4DCE6";
const C_HOLD_BG= "#EBD9E2";

const C_MONO    = "'JetBrains Mono', ui-monospace, monospace";
const C_SERIF   = "var(--f-display)";

// ────────────────────────── channel palette ──────────────────────────
// All channel badges use the fuchsia → plum spectrum. Distinguished by
// icon + label rather than hue, matching the hero composition.
const CHANNELS = {
  whatsapp:  { label: "WhatsApp",      fg: C_FUCHSIA,      bg: C_FUCHSIA_WASH, border: C_FUCHSIA + "55" },
  webchat:   { label: "Web Chatbot",   fg: C_FUCHSIA_DEEP, bg: C_FUCHSIA_WASH, border: C_FUCHSIA_DEEP + "55" },
  voice:     { label: "Voice Call",    fg: C_PLUM,         bg: C_FUCHSIA_PALE, border: C_PLUM + "55" },
  instagram: { label: "Instagram DM",  fg: C_FUCHSIA_DARK, bg: C_FUCHSIA_PALE, border: C_FUCHSIA_DARK + "55" },
  facebook:  { label: "Facebook Msgr", fg: C_PLUM_DEEP,    bg: C_HOLD_BG,      border: C_PLUM_DEEP + "55" },
  email:     { label: "Email Inbox",   fg: C_INK,          bg: C_PAPER,        border: C_RULE },
  sms:       { label: "SMS",           fg: C_FUCHSIA_DEEP, bg: "#F8DDE7",      border: C_FUCHSIA_DEEP + "44" },
  metaads:   { label: "Meta Ads",      fg: C_PLUM,         bg: C_FUCHSIA_WASH, border: C_PLUM + "44" },
  website:   { label: "Website",       fg: C_FUCHSIA_DARK, bg: C_FUCHSIA_PALE, border: C_FUCHSIA_DARK + "55" },
};

// ────────────────────────── icons ──────────────────────────
function CIcon({ name, size = 14, color, strokeWidth = 1.8, style }) {
  const stroke = color || "currentColor";
  const p = {
    width: size, height: size, viewBox: "0 0 24 24", fill: "none",
    stroke, strokeWidth, strokeLinecap: "round", strokeLinejoin: "round",
    style: { display: "block", flexShrink: 0, ...style },
  };
  switch (name) {
    case "phone":        return <svg {...p}><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.1-8.7A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .3 1.9.6 2.8a2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.5 2.8.6a2 2 0 0 1 1.8 2z"/></svg>;
    case "mail":         return <svg {...p}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>;
    case "globe":        return <svg {...p}><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15 15 0 0 1 0 20M12 2a15 15 0 0 0 0 20"/></svg>;
    case "building":     return <svg {...p}><rect x="4" y="3" width="16" height="18" rx="1.5"/><path d="M8 7h3M8 11h3M8 15h3M13 7h3M13 11h3M13 15h3M9 21v-3h6v3"/></svg>;
    case "pin":          return <svg {...p}><path d="M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 1 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>;
    case "tag":          return <svg {...p}><path d="M20 12 12 20 3 11V3h8z"/><circle cx="7.5" cy="7.5" r="1.2"/></svg>;
    case "calendar":     return <svg {...p}><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M16 3v4M8 3v4M3 11h18"/></svg>;
    case "edit":         return <svg {...p}><path d="M12 20h9M16.5 3.5a2.1 2.1 0 1 1 3 3L7 19l-4 1 1-4z"/></svg>;
    case "eye":          return <svg {...p}><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg>;
    case "cursor":       return <svg {...p}><path d="M5 3l14 7-6 2-2 6z"/></svg>;
    case "chat":         return <svg {...p}><path d="M21 12a8.5 8.5 0 0 1-12.6 7.4L3 21l1.6-5.4A8.5 8.5 0 1 1 21 12z"/></svg>;
    case "alert":        return <svg {...p}><path d="M12 9v4M12 17v.5"/><path d="M10.3 3.86 1.82 18a2 2 0 0 0 1.7 3h16.96a2 2 0 0 0 1.7-3L13.7 3.86a2 2 0 0 0-3.4 0z"/></svg>;
    case "check":        return <svg {...p}><polyline points="4,12 10,18 20,6"/></svg>;
    case "check-circle": return <svg {...p}><circle cx="12" cy="12" r="10"/><polyline points="8,12 11,15 16,9"/></svg>;
    case "play":         return <svg {...p} fill={stroke}><polygon points="6,4 20,12 6,20"/></svg>;
    case "spark":        return <svg {...p}><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1"/><circle cx="12" cy="12" r="3"/></svg>;
    case "heart":        return <svg {...p}><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 1 0-7.8 7.8l8.8 8.8 8.8-8.8a5.5 5.5 0 0 0 0-7.8z"/></svg>;
    case "brain":        return <svg {...p}><path d="M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 1.98-3A2.5 2.5 0 0 1 9.5 2z"/><path d="M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3A2.5 2.5 0 0 0 14.5 2z"/></svg>;
    case "user":         return <svg {...p}><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg>;
    case "users":        return <svg {...p}><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8"/></svg>;
    case "shield":       return <svg {...p}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>;
    case "search":       return <svg {...p}><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>;
    case "bed":          return <svg {...p}><path d="M2 20v-7a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v7"/><path d="M2 17h20M6 11V7a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v4"/><circle cx="8" cy="9" r="1.2"/></svg>;
    case "gift":         return <svg {...p}><rect x="3" y="8" width="18" height="4"/><path d="M5 12v10h14V12M12 22V8M12 8H7.5a2.5 2.5 0 0 1 0-5C11 3 12 8 12 8zM12 8h4.5a2.5 2.5 0 0 0 0-5C13 3 12 8 12 8z"/></svg>;
    case "send":         return <svg {...p}><path d="M22 2 11 13M22 2l-7 20-4-9-9-4z"/></svg>;
    case "compass":      return <svg {...p}><circle cx="12" cy="12" r="10"/><polygon points="16.2,7.8 13.4,13.4 7.8,16.2 10.6,10.6"/></svg>;
    case "trending":     return <svg {...p}><polyline points="3,17 9,11 13,15 21,7"/><polyline points="15,7 21,7 21,13"/></svg>;
    case "trash":        return <svg {...p}><polyline points="3,6 5,6 21,6"/><path d="M19 6 18 20a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6M10 11v6M14 11v6"/></svg>;
    case "chevron":      return <svg {...p}><polyline points="6,9 12,15 18,9"/></svg>;
    case "sparkles":     return <svg {...p}><path d="M12 3l1.8 4.8L18 9.6l-4.2 1.8L12 16l-1.8-4.6L6 9.6l4.2-1.8z"/><path d="M18 16l.9 2.4L21 19.2l-2.1.9L18 22l-.9-1.9L15 19.2l2.1-.8z"/></svg>;
    case "wifi":         return <svg {...p}><path d="M5 12a10 10 0 0 1 14 0M8.5 15.5a6 6 0 0 1 7 0M2 8.8a16 16 0 0 1 20 0"/><circle cx="12" cy="19" r="1" fill={stroke}/></svg>;
    case "lock":         return <svg {...p}><rect x="3" y="11" width="18" height="10" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>;
    case "history":      return <svg {...p}><path d="M3 12a9 9 0 1 0 3-6.7L3 8M3 3v5h5M12 7v5l3 2"/></svg>;
    case "log":          return <svg {...p}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14,2 14,8 20,8"/><path d="M8 13h8M8 17h5"/></svg>;
    case "bar":          return <svg {...p}><line x1="4" y1="20" x2="4" y2="10"/><line x1="10" y1="20" x2="10" y2="4"/><line x1="16" y1="20" x2="16" y2="14"/><line x1="22" y1="20" x2="22" y2="8"/></svg>;
    case "clock":        return <svg {...p}><circle cx="12" cy="12" r="10"/><polyline points="12,7 12,12 16,14"/></svg>;
    case "minus":        return <svg {...p}><line x1="5" y1="12" x2="19" y2="12"/></svg>;
    case "plus":         return <svg {...p}><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>;
    case "external":     return <svg {...p}><path d="M14 3h7v7M10 14 21 3M19 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h6"/></svg>;
    case "filter":       return <svg {...p}><polygon points="3,4 21,4 14,12 14,20 10,18 10,12"/></svg>;
    default: return null;
  }
}

// ────────────────────────── seed data ──────────────────────────
// All values below are entirely fictional.
const BRAND = "AURELIA"; // fictional hotel chain used inside the showcase

const GUEST = {
  first: "Anouk",
  last: "Vermeer",
  initials: "AV",
  phone: "+31 6 4427 8851",
  email: "anouk.vermeer@hivemail.co",
  hotel: `${BRAND} Cala Marina`,
  language: "EN",
  city: "Amsterdam · NL",
  timezone: "Europe/Amsterdam",
  stage: "In-Stay",
  source: "guestmaker.direct",
  createdAgo: "4 months ago",
  lastMessage: "8 minutes ago",
  status: "Active",
};

const UPCOMING = {
  from: "21 May",
  to: "26 May",
  nights: 5,
  room: "Suite Vista Mar (HB)",
  hotel: `${BRAND} Cala Marina`,
  source: "whatsapp",
  total: "€2,140",
};

const STATS_TOP = [
  { lbl: "Total Stays",    val: "4",      sub: "since 2023",       icon: "calendar",  tone: "paper" },
  { lbl: "Total Revenue",  val: "€7,486", sub: "lifetime",          icon: "trending",  tone: "fuchsia" },
  { lbl: "Extras Revenue", val: "€892",   sub: "spa · F&B · tour",  icon: "gift",      tone: "pale"  },
  { lbl: "Avg / Night",    val: "€374",   sub: "above segment avg", icon: "bed",       tone: "cream"  },
];

const STAT_TONES = {
  paper:   { bg: "#fbf8f0", border: "#ece5d2", fg: C_INK,        accent: C_FUCHSIA },
  fuchsia: { bg: `linear-gradient(135deg, ${C_FUCHSIA} 0%, ${C_FUCHSIA_DEEP} 100%)`,
             border: C_FUCHSIA_DEEP, fg: "#fff", accent: "#fff" },
  pale:    { bg: "#fbe6ec", border: "#f1c8d6", fg: C_FUCHSIA_DARK, accent: C_FUCHSIA_DEEP },
  cream:   { bg: "#f6efdf", border: "#e7dcc1", fg: C_FUCHSIA_DEEP, accent: C_FUCHSIA_DEEP },
};

const EMAIL_TILES = [
  { lbl: "Total Opens",     val: "47",  sub: "84% open rate",     icon: "eye" },
  { lbl: "Total Clicks",    val: "21",  sub: "44% CTR",           icon: "cursor" },
  { lbl: "Total Bounces",   val: "0",   sub: "all delivered",     icon: "mail" },
  { lbl: "Spam Complaints", val: "0",   sub: "clean reputation",  icon: "shield" },
];

const INBOX_TILES = [
  { lbl: "Messages",        val: "82",   sub: "38 in · 44 out" },
  { lbl: "Engagement",      val: "100%", sub: "Above average", trend: true },
  { lbl: "Questions",       val: "27",   sub: "92% AI handled" },
  { lbl: "Requests",        val: "6",    sub: "5 journeys done" },
];

const MSG_BY_CHANNEL = [
  { id: "whatsapp",  count: 38, pct: 46 },
  { id: "webchat",   count: 19, pct: 23 },
  { id: "email",     count: 13, pct: 16 },
  { id: "instagram", count: 7,  pct: 8  },
  { id: "voice",     count: 5,  pct: 6  },
];

const AI_ROW = [
  { lbl: "AI Responses",   val: "61",      icon: "spark",  color: C_FUCHSIA },
  { lbl: "Avg AI Time",    val: "2.4 s",   icon: "play",   color: C_INK },
  { lbl: "Human Responses",val: "5",       icon: "user",   color: C_INK },
  { lbl: "Avg Human Time", val: "4 m 12 s",icon: "play",   color: C_INK },
];

const ACTIVITY = [
  { kind: "ai",      channel: "whatsapp",  title: "AI response",       body: "Yes Anouk, late check-out until 2pm is confirmed for Cala Marina suite guests, complimentary.", time: "8 min ago" },
  { kind: "msg-in",  channel: "whatsapp",  title: "Message received",  body: "Would it be possible to keep the room until 2pm on Sunday? Our flight is at 6.", time: "9 min ago" },
  { kind: "ai",      channel: "instagram", title: "AI response",       body: "Lovely, I've forwarded your beach-front cabana request to the pool team. Confirmation tomorrow.", time: "2 h ago" },
  { kind: "msg-in",  channel: "instagram", title: "Message received",  body: "Saw your last reel, any chance we could book the beach-front cabana 7B for the 22nd?", time: "2 h ago" },
  { kind: "call",    channel: "voice",     title: "Call · Inbound",    body: "Spa booking. Aphrodite ritual at 16:00 on Thursday. 3 m 14 s.", time: "yesterday" },
  { kind: "ai",      channel: "webchat",   title: "AI response",       body: "Bicycle rental is €12 per day at reception, would you like me to reserve two for tomorrow?", time: "yesterday" },
  { kind: "email",   channel: "email",     title: "Email opened",      body: "\"Your stay starts in 3 days, what to pack\" · opened from iPhone Mail, Amsterdam.", time: "3 d ago" },
  { kind: "journey", channel: null,        title: "Journey completed", body: "Pre-Stay Welcome · vegan menu preference captured.", time: "3 d ago" },
  { kind: "msg-out", channel: "facebook",  title: "Message sent",      body: "Hello Anouk! We saw you stayed with us last year. Here's your returning-guest perk.", time: "5 d ago" },
  { kind: "created", channel: null,        title: "Contact enriched", body: "Captive portal · mobile + DOB · OTA temp email replaced.", time: "1 wk ago" },
];

const ACT_ICON = {
  ai:       { name: "spark",        color: C_FUCHSIA },
  "msg-in": { name: "chat",         color: C_INK },
  "msg-out":{ name: "send",         color: C_INK },
  call:     { name: "phone",        color: C_PLUM },
  email:    { name: "mail",         color: C_INK },
  journey:  { name: "check-circle", color: C_FUCHSIA },
  created:  { name: "user",         color: C_PLUM_DEEP },
};

// Memory
const MEM_PREFS = [
  "Vegan menu options", "Sea-view room", "Late check-out flexibility",
  "Lactose-free breakfast", "Quiet floor",
];
const MEM_INTERESTS = ["Cycling routes", "Pilates classes", "Local wineries", "Beach-front cabanas"];
const MEM_CONTEXT = [
  "Travels with partner Bram, no children",
  "Long-haul cyclist · brings own bike",
  "Repeat guest · 3 prior stays at Cala Marina",
];
const MEM_STATS = [
  { lbl: "Total Memories", val: "24" },
  { lbl: "Preference",     val: "11", color: C_FUCHSIA },
  { lbl: "Interest",       val: "6",  color: C_FUCHSIA_DEEP },
  { lbl: "Context",        val: "5",  color: C_PLUM },
  { lbl: "Communication",  val: "2",  color: C_FUCHSIA_DARK },
  { lbl: "Issue",          val: "0",  color: C_PLUM_DEEP },
];
const MEM_LIST = [
  { type: "Preference",    confidence: "High", importance: 9, body: "Always orders vegan menu, mentions lactose intolerance. Please flag at all F&B outlets.", time: "2 h ago",  channel: "whatsapp" },
  { type: "Interest",      confidence: "High", importance: 8, body: "Asks about cycling routes every visit. Owns a Cervélo road bike and brings it on holiday.", time: "yesterday", channel: "voice" },
  { type: "Preference",    confidence: "Med",  importance: 7, body: "Prefers higher floors with sea view. Explicitly avoids pool-facing rooms.",                time: "3 d ago",   channel: "webchat" },
  { type: "Context",       confidence: "High", importance: 6, body: "Travels with partner Bram. Booking always under Anouk's name; Bram handles payment.",      time: "5 d ago",   channel: "email" },
  { type: "Interest",      confidence: "Med",  importance: 5, body: "Liked our cabana reel on Instagram twice. Opportunity for upsell on her May stay.",       time: "1 wk ago",  channel: "instagram" },
  { type: "Communication", confidence: "High", importance: 8, body: "Replies to WhatsApp within 5 minutes; rarely opens promotional emails.",                    time: "2 wk ago",  channel: "whatsapp" },
];
const MEM_TYPE_COLOR = {
  Preference: C_FUCHSIA, Interest: C_FUCHSIA_DEEP, Context: C_PLUM,
  Communication: C_FUCHSIA_DARK, Issue: C_PLUM_DEEP,
};

// Channels
const CONVERSATIONS = [
  { channel: "whatsapp",  ai: true,  preview: "Yes Anouk, late check-out until 2pm is confirmed and complimentary for Cala Marina suite guests.", time: "8 minutes ago", msgs: 24 },
  { channel: "instagram", ai: true,  preview: "Lovely, I've forwarded your beach-front cabana request to the pool team. Confirmation tomorrow.", time: "2 hours ago",   msgs: 6 },
  { channel: "webchat",   ai: true,  preview: "Bicycle rental is €12/day at reception, would you like me to reserve two for tomorrow?",         time: "yesterday",     msgs: 11 },
  { channel: "email",     ai: false, preview: "Re: Your stay starts in 3 days, what to pack",                                                    time: "3 days ago",    msgs: 4 },
  { channel: "facebook",  ai: true,  preview: "Hello Anouk! We saw you stayed with us last year. Here's your returning-guest perk.",              time: "5 days ago",    msgs: 2 },
];

// Reservations
const RESV = [
  { id: "AUR-019842", from: "21-05-2026", to: "26-05-2026", nts: 5, room: "Suite Vista Mar (HB)",        rev: "€2,140", extras: "€340", total: "€2,480", status: "Confirmed", src: "whatsapp" },
  { id: "AUR-016301", from: "12-09-2025", to: "19-09-2025", nts: 7, room: "Doble Vista Mar (BB)",        rev: "€1,820", extras: "€220", total: "€2,040", status: "CheckedOut", src: "webchat" },
  { id: "AUR-014510", from: "03-06-2025", to: "08-06-2025", nts: 5, room: "Suite Vista Mar (HB)",        rev: "€1,975", extras: "€180", total: "€2,155", status: "CheckedOut", src: "voice" },
  { id: "AUR-012204", from: "21-02-2025", to: "25-02-2025", nts: 4, room: "Doble Estándar (BB)",         rev: "€720",   extras: "€60",  total: "€780",   status: "CheckedOut", src: "email" },
  { id: "AUR-011187", from: "10-12-2024", to: "12-12-2024", nts: 2, room: "Doble Vista Mar (BB)",        rev: "€420",   extras: "€42",  total: "€462",   status: "Cancelled",  src: "webchat" },
  { id: "AUR-009920", from: "15-08-2024", to: "22-08-2024", nts: 7, room: "Suite Vista Mar (AI)",        rev: "€2,931", extras: "€150", total: "€3,081", status: "CheckedOut", src: "instagram" },
  { id: "AUR-008115", from: "02-05-2024", to: "06-05-2024", nts: 4, room: "Doble Estándar (BB)",         rev: "€680",   extras: "-",    total: "€680",   status: "CheckedOut", src: "email" },
  { id: "AUR-005003", from: "11-09-2023", to: "16-09-2023", nts: 5, room: "Doble Vista Mar (HB)",        rev: "€1,490", extras: "€115", total: "€1,605", status: "CheckedOut", src: "webchat" },
];

const RESV_STATS = [
  { lbl: "Total Stays",   val: "7",       sub: "5 confirmed · 1 cancelled · 1 upcoming", icon: "calendar", tone: "paper" },
  { lbl: "Total Revenue", val: "€10,176", sub: "lifetime",                               icon: "trending", tone: "fuchsia" },
  { lbl: "Total Extras",  val: "€1,107",  sub: "10.9% extras share",                     icon: "gift",     tone: "pale" },
];

// Website behaviour
const WB_TILES = [
  { lbl: "Sessions",         val: "23", sub: "in the last 90 days" },
  { lbl: "Page Views",       val: "171", sub: "7.4 per session" },
  { lbl: "Avg Time on Site", val: "4 m 38 s", sub: "well above median" },
  { lbl: "Bounce Rate",      val: "12%", sub: "engaged visitor" },
];
const WB_PAGES = [
  { page: "/cala-marina/rooms/suite-vista-mar",     views: 38, avg: "1 m 52 s" },
  { page: "/cala-marina/spa",                       views: 24, avg: "2 m 18 s" },
  { page: "/cala-marina/gastronomy/vegan",          views: 19, avg: "3 m 02 s" },
  { page: "/cala-marina/cycling-and-active",        views: 17, avg: "4 m 11 s" },
  { page: "/cala-marina/cabanas",                   views: 11, avg: "2 m 47 s" },
  { page: "/loyalty-club",                          views: 9,  avg: "1 m 22 s" },
];
const WB_FUNNEL = [
  { step: "Landing page",      n: 23,  pct: 100 },
  { step: "Room details",      n: 17,  pct: 74 },
  { step: "Date picker opened",n: 12,  pct: 52 },
  { step: "Booking started",   n: 6,   pct: 26 },
  { step: "Booking completed", n: 4,   pct: 17 },
];
const WB_DEVICES = [
  { d: "iPhone · Safari",     pct: 64 },
  { d: "MacBook · Chrome",    pct: 28 },
  { d: "iPad · Safari",       pct: 8  },
];

// Languages
const LANG_DETECTED = [
  { code: "EN", name: "English",  pct: 78, msgs: 64, primary: true },
  { code: "NL", name: "Dutch",    pct: 14, msgs: 11, primary: false },
  { code: "ES", name: "Spanish",  pct: 6,  msgs: 5,  primary: false },
  { code: "DE", name: "German",   pct: 2,  msgs: 2,  primary: false },
];
const LANG_BY_CH = [
  { ch: "whatsapp", langs: [{ c: "EN", p: 82 }, { c: "NL", p: 18 }] },
  { ch: "webchat",  langs: [{ c: "EN", p: 100 }] },
  { ch: "instagram",langs: [{ c: "EN", p: 71 }, { c: "ES", p: 29 }] },
  { ch: "voice",    langs: [{ c: "EN", p: 60 }, { c: "NL", p: 40 }] },
  { ch: "email",    langs: [{ c: "EN", p: 100 }] },
];

// Contact Info, system
const SYS_FIELDS = [
  ["Phone",        GUEST.phone],
  ["Language",     "English (EN)"],
  ["Hotel",        GUEST.hotel],
  ["Guest Stage",  GUEST.stage],
  ["Source",       GUEST.source],
  ["Timezone",     GUEST.timezone],
  ["Created",      "16 Jan 2026"],
  ["Last Message", GUEST.lastMessage],
];
const PERSONAL_FIELDS = [
  ["First Name",      GUEST.first],
  ["Last Name",       GUEST.last],
  ["Email",           GUEST.email],
  ["Date of Birth",   "12 Mar 1986"],
  ["Gender",          "Female"],
  ["Nationality",     "Netherlands"],
  ["Document Type",   "Passport"],
  ["Document Number", "NXD••••18"],
];

// ────────────────────────── atoms ──────────────────────────
function CEyebrow({ children, color = C_FUCHSIA, style }) {
  return <div style={{
    fontFamily: C_MONO, fontSize: 10.5, color, fontWeight: 700,
    letterSpacing: "0.22em", textTransform: "uppercase", ...style,
  }}>{children}</div>;
}
function CMono({ children, size = 11, color = C_DIM, style }) {
  return <span style={{ fontFamily: C_MONO, fontSize: size, color, letterSpacing: "0.04em", ...style }}>{children}</span>;
}
function CDot({ color, size = 6, pulse = false, style }) {
  return <span style={{
    display: "inline-block", width: size, height: size, borderRadius: "50%",
    background: color, animation: pulse ? "gm-dot-pulse 1.4s ease-in-out infinite" : "none",
    flexShrink: 0, ...style,
  }} />;
}

function ChannelBadge({ id, size = "sm" }) {
  const c = CHANNELS[id];
  if (!c) return null;
  const padding = size === "sm" ? "2px 7px 2px 6px" : "3px 9px 3px 7px";
  const fontSize = size === "sm" ? 9.5 : 10.5;
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 4,
      padding, borderRadius: 4,
      background: c.bg, color: c.fg, border: `1px solid ${c.border}`,
      fontFamily: C_MONO, fontSize, fontWeight: 700,
      letterSpacing: "0.05em", whiteSpace: "nowrap",
    }}>
      <CDot color={c.fg} size={5} />
      {c.label}
    </span>
  );
}

function HeaderChip({ icon, children }) {
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 7,
      padding: "4px 11px 4px 9px", fontSize: 12, color: C_INK,
    }}>
      <CIcon name={icon} size={13} color={C_DIM} strokeWidth={1.7} />
      {children}
    </span>
  );
}

function SectionTitle({ children }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 12, marginTop: 22, marginBottom: 10 }}>
      <CEyebrow color={C_DIM} style={{ fontSize: 10, letterSpacing: "0.18em" }}>{children}</CEyebrow>
      <span style={{ flex: 1, height: 1, background: C_RULE_S }} />
    </div>
  );
}

// Reusable panel with title
function Panel({ icon, title, action, children, padded = true }) {
  return (
    <div style={{
      background: "#fff", border: `1px solid ${C_RULE}`, borderRadius: 12,
      marginBottom: 14,
    }}>
      <div style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        padding: "13px 18px",
        borderBottom: `1px solid ${C_RULE_S}`,
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
          {icon && <CIcon name={icon} size={14} color={C_INK} strokeWidth={1.9} />}
          <span style={{ fontSize: 13.5, color: C_INK, fontWeight: 700 }}>{title}</span>
        </div>
        {action}
      </div>
      <div style={{ padding: padded ? "16px 18px 18px" : 0 }}>{children}</div>
    </div>
  );
}

// ────────────────────────── product chrome ──────────────────────────
function MockTopBar() {
  return (
    <div style={{
      display: "flex", alignItems: "center", justifyContent: "space-between",
      padding: "0 16px", height: 38, background: "#0e0e0e", color: "#cfc8c8",
      borderTopLeftRadius: 12, borderTopRightRadius: 12,
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
        <span style={{ width: 10, height: 10, borderRadius: 5, background: "#ff5f56" }} />
        <span style={{ width: 10, height: 10, borderRadius: 5, background: "#ffbd2e" }} />
        <span style={{ width: 10, height: 10, borderRadius: 5, background: "#27c93f" }} />
        <span style={{ marginLeft: 16, fontFamily: C_MONO, fontSize: 10.5, letterSpacing: "0.08em", color: "#8b8181" }}>
          guestmaker.ai / contacts / anouk-vermeer
        </span>
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
        <span style={{ fontFamily: C_MONO, fontSize: 10, letterSpacing: "0.18em", color: "#b8acac", fontWeight: 700 }}>ADMIN</span>
        <span style={{ fontFamily: C_MONO, fontSize: 10, letterSpacing: "0.06em", color: "#cfc8c8" }}>{BRAND} Hotels ▾</span>
      </div>
    </div>
  );
}

function ContactHeader() {
  return (
    <div>
      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 18 }}>
        <CMono size={10.5} color={C_FAINT} style={{ letterSpacing: "0.12em", fontWeight: 600 }}>DATA</CMono>
        <CIcon name="chevron" size={11} color={C_FAINT} strokeWidth={2} style={{ transform: "rotate(-90deg)" }} />
        <CMono size={10.5} color={C_FAINT} style={{ letterSpacing: "0.12em", fontWeight: 600 }}>CONTACTS</CMono>
        <CIcon name="chevron" size={11} color={C_FAINT} strokeWidth={2} style={{ transform: "rotate(-90deg)" }} />
        <CMono size={10.5} color={C_INK} style={{ letterSpacing: "0.12em", fontWeight: 700 }}>ANOUK VERMEER</CMono>
      </div>

      <div style={{ display: "flex", alignItems: "flex-start", gap: 18 }}>
        <div style={{
          width: 60, height: 60, borderRadius: 14, flexShrink: 0,
          background: `linear-gradient(135deg, ${C_FUCHSIA}, ${C_FUCHSIA_DEEP})`,
          color: "#fff", display: "flex", alignItems: "center", justifyContent: "center",
          fontFamily: C_SERIF, fontSize: 22, fontStyle: "italic", fontWeight: 600,
          boxShadow: `inset 0 -3px 6px rgba(0,0,0,0.18), 0 8px 18px -10px ${C_FUCHSIA}88`,
          letterSpacing: "-0.02em",
        }}>{GUEST.initials}</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{
            fontFamily: C_SERIF, fontSize: 32, fontWeight: 600,
            color: C_INK, letterSpacing: "-0.018em", lineHeight: 1.05, marginBottom: 4,
          }}>
            {GUEST.first} <span style={{ fontStyle: "italic", color: C_FUCHSIA_DEEP }}>{GUEST.last}</span>
          </div>
          <CMono size={12} color={C_DIM}>{GUEST.phone}</CMono>
        </div>

        <button style={{
          display: "inline-flex", alignItems: "center", gap: 7,
          padding: "9px 14px", borderRadius: 8,
          background: "#fff", border: `1px solid ${C_RULE}`,
          color: C_INK, fontSize: 12.5, fontWeight: 600,
          fontFamily: "'Inter', sans-serif", cursor: "pointer",
          boxShadow: "0 1px 0 rgba(0,0,0,0.02), 0 4px 10px -6px rgba(0,0,0,0.08)",
        }}>
          <CIcon name="edit" size={13} color={C_INK} strokeWidth={1.9} />
          Edit
        </button>
      </div>

      <div style={{
        marginTop: 16, padding: "8px 6px",
        background: "#fff", border: `1px solid ${C_RULE}`, borderRadius: 10,
        display: "flex", alignItems: "center", flexWrap: "wrap",
      }}>
        {[
          { i: "phone",    t: GUEST.phone },
          { i: "mail",     t: GUEST.email },
          { i: "building", t: GUEST.hotel },
          { i: "globe",    t: GUEST.language },
          { i: "pin",      t: GUEST.city },
          { i: "tag",      t: GUEST.stage },
          { i: "calendar", t: `Created ${GUEST.createdAgo}` },
        ].map((c, i) => (
          <React.Fragment key={i}>
            <HeaderChip icon={c.i}>{c.t}</HeaderChip>
            {i < 6 && <span style={{ width: 1, height: 14, background: C_RULE_S }} />}
          </React.Fragment>
        ))}
        <span style={{ flex: 1 }} />
        <span style={{
          display: "inline-flex", alignItems: "center", gap: 6,
          padding: "5px 11px 5px 9px",
          background: C_OK_BG, color: C_OK, border: `1px solid ${C_OK}55`,
          borderRadius: 999, fontSize: 11.5, fontWeight: 700,
          letterSpacing: "0.04em", marginRight: 6,
        }}>
          <CIcon name="check" size={11} color={C_OK} strokeWidth={2.4} />
          Active
        </span>
      </div>
    </div>
  );
}

const TABS = [
  { id: "overview",   label: "Overview",          icon: "user" },
  { id: "contact",    label: "Contact Info",      icon: "mail" },
  { id: "stays",      label: "Reservations",      icon: "calendar" },
  { id: "channels",   label: "Channels",          icon: "send" },
  { id: "memory",     label: "Memory",            icon: "brain" },
  { id: "behaviour",  label: "Website Behaviour", icon: "compass" },
  { id: "languages",  label: "Languages",         icon: "globe" },
];

function TabNav({ active, onChange }) {
  return (
    <div style={{
      display: "flex", alignItems: "center", gap: 4,
      padding: 5, marginTop: 22, marginBottom: 26,
      background: "#efeadd",
      border: `1px solid ${C_RULE}`, borderRadius: 11,
      overflowX: "auto",
    }}>
      {TABS.map(t => {
        const on = t.id === active;
        return (
          <button key={t.id}
            onClick={() => onChange(t.id)}
            style={{
              display: "inline-flex", alignItems: "center", gap: 7,
              padding: "8px 14px", border: "none", borderRadius: 7,
              background: on ? "#fff" : "transparent",
              boxShadow: on ? "0 1px 0 rgba(0,0,0,0.04), 0 6px 14px -10px rgba(0,0,0,0.18)" : "none",
              color: on ? C_INK : "#7a6f70",
              fontSize: 12.5, fontWeight: on ? 700 : 500,
              fontFamily: "'Inter', sans-serif",
              cursor: "pointer", whiteSpace: "nowrap",
              transition: "all 0.15s ease", position: "relative",
            }}
          >
            <CIcon name={t.icon} size={13} color={on ? C_FUCHSIA : "#7a6f70"} strokeWidth={1.9} />
            {t.label}
          </button>
        );
      })}
    </div>
  );
}

// ────────────────────────── stat tile (fuchsia-coherent) ──────────────────────────
function StatTile({ s }) {
  const t = STAT_TONES[s.tone];
  const isHero = s.tone === "fuchsia";
  return (
    <div style={{
      background: t.bg,
      borderRadius: 12,
      padding: "16px 18px 14px",
      border: `1px solid ${t.border}`,
      position: "relative", minHeight: 108,
      boxShadow: isHero ? `0 16px 30px -18px ${C_FUCHSIA}AA` : "0 1px 0 rgba(0,0,0,0.02)",
      color: t.fg,
      overflow: "hidden",
    }}>
      {isHero && (
        <div style={{
          position: "absolute", right: -40, top: -40, width: 140, height: 140,
          borderRadius: "50%", background: "rgba(255,255,255,0.08)", filter: "blur(8px)",
          pointerEvents: "none",
        }} />
      )}
      <div style={{ position: "absolute", top: 14, right: 14, opacity: isHero ? 0.7 : 0.5 }}>
        <CIcon name={s.icon} size={15} color={t.accent} strokeWidth={1.9} />
      </div>
      <CMono size={10} color={isHero ? "rgba(255,255,255,0.85)" : t.accent} style={{
        letterSpacing: "0.16em", fontWeight: 700, opacity: 0.85,
      }}>
        {s.lbl.toUpperCase()}
      </CMono>
      <div style={{
        fontFamily: C_SERIF, fontSize: 30, fontWeight: 600, color: t.fg,
        letterSpacing: "-0.025em", lineHeight: 1, marginTop: 10, marginBottom: 8,
      }}>
        {s.val}
      </div>
      <CMono size={10} color={isHero ? "rgba(255,255,255,0.7)" : C_DIM}>
        {s.sub}
      </CMono>
    </div>
  );
}

function MetricTile({ t }) {
  return (
    <div style={{
      background: "#fff", border: `1px solid ${C_RULE}`, borderRadius: 10,
      padding: "13px 15px 12px", minHeight: 96, position: "relative",
    }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 6 }}>
        <CMono size={9.5} color={C_FAINT} style={{ letterSpacing: "0.16em", fontWeight: 700 }}>
          {t.lbl.toUpperCase()}
        </CMono>
        {t.icon && <CIcon name={t.icon} size={12} color={t.color || C_FUCHSIA_SOFT} strokeWidth={1.9} />}
      </div>
      <div style={{
        fontFamily: C_SERIF, fontSize: 24, fontWeight: 600, color: t.color || C_INK,
        letterSpacing: "-0.015em", marginBottom: 4, display: "flex", alignItems: "center", gap: 6,
      }}>
        {t.val}
        {t.trend && <CIcon name="trending" size={12} color={C_FUCHSIA} strokeWidth={2.2} />}
      </div>
      <CMono size={10} color={C_DIM}>{t.sub}</CMono>
    </div>
  );
}

// ────────────────────────── OVERVIEW ──────────────────────────
function UpcomingStay() {
  return (
    <div style={{
      border: `1px solid ${C_RULE}`, borderRadius: 12,
      background: "#fff", padding: "16px 20px", marginBottom: 18,
      position: "relative", overflow: "hidden",
    }}>
      <div style={{
        position: "absolute", left: 0, top: 0, bottom: 0, width: 4,
        background: `linear-gradient(180deg, ${C_FUCHSIA}, ${C_FUCHSIA_DEEP})`,
      }} />
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 10 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
          <CEyebrow color={C_DIM} style={{ fontSize: 10 }}>Upcoming Stay</CEyebrow>
          <span style={{
            padding: "2px 8px", borderRadius: 4, background: C_OK_BG,
            color: C_OK, fontFamily: C_MONO, fontSize: 9.5, fontWeight: 700,
            letterSpacing: "0.06em", border: `1px solid ${C_OK}33`,
          }}>CONFIRMED</span>
        </div>
        <ChannelBadge id={UPCOMING.source} />
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "auto 1fr auto auto", gap: 24, alignItems: "center" }}>
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <CIcon name="calendar" size={14} color={C_INK} strokeWidth={1.8} />
            <span style={{ fontFamily: C_SERIF, fontSize: 18, fontWeight: 600, color: C_INK, letterSpacing: "-0.01em" }}>{UPCOMING.from}</span>
            <span style={{ color: C_FAINT }}>→</span>
            <span style={{ fontFamily: C_SERIF, fontSize: 18, fontWeight: 600, color: C_INK, letterSpacing: "-0.01em" }}>{UPCOMING.to}</span>
          </div>
          <CMono size={10.5} color={C_DIM} style={{ marginLeft: 22 }}>{UPCOMING.nights} nights</CMono>
        </div>
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 7 }}>
            <CIcon name="bed" size={13} color={C_INK} strokeWidth={1.8} />
            <span style={{ fontSize: 13.5, color: C_INK, fontWeight: 600 }}>{UPCOMING.room}</span>
          </div>
          <CMono size={10.5} color={C_DIM} style={{ marginLeft: 20 }}>{UPCOMING.hotel}</CMono>
        </div>
        <div style={{ textAlign: "right" }}>
          <div style={{ fontFamily: C_SERIF, fontSize: 22, fontWeight: 600, color: C_INK, letterSpacing: "-0.015em" }}>{UPCOMING.total}</div>
          <CMono size={9.5} color={C_FAINT} style={{ letterSpacing: "0.14em" }}>TOTAL</CMono>
        </div>
        <button style={{
          padding: "7px 13px", borderRadius: 7, background: "transparent", border: `1px solid ${C_RULE}`,
          fontSize: 12, color: C_INK, fontWeight: 600, cursor: "pointer",
          display: "inline-flex", alignItems: "center", gap: 5,
        }}>
          <CIcon name="eye" size={12} color={C_INK} strokeWidth={1.9} />
          Details
        </button>
      </div>
    </div>
  );
}

function ChannelChart() {
  return (
    <div style={{
      background: "#fff", border: `1px solid ${C_RULE}`, borderRadius: 12,
      padding: "16px 18px", marginTop: 18,
    }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 12 }}>
        <CEyebrow color={C_DIM} style={{ fontSize: 10 }}>Messages by channel</CEyebrow>
        <CMono size={10} color={C_FAINT} style={{ letterSpacing: "0.14em" }}>LAST 30 DAYS</CMono>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 9 }}>
        {MSG_BY_CHANNEL.map(c => {
          const cc = CHANNELS[c.id];
          return (
            <div key={c.id} style={{ display: "grid", gridTemplateColumns: "150px 1fr auto", alignItems: "center", gap: 14 }}>
              <ChannelBadge id={c.id} />
              <div style={{ position: "relative", height: 8, background: C_CREAM, borderRadius: 4, overflow: "hidden" }}>
                <div style={{
                  position: "absolute", inset: 0, width: `${c.pct}%`,
                  background: cc.fg, borderRadius: 4,
                }} />
              </div>
              <CMono size={11} color={C_INK} style={{ fontWeight: 700, width: 70, textAlign: "right", fontVariantNumeric: "tabular-nums" }}>
                {c.count} <span style={{ color: C_FAINT, fontWeight: 500 }}>({c.pct}%)</span>
              </CMono>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function ActivityFeed() {
  const [highlight, setHighlight] = cUseState(0);
  cUseEffect(() => {
    const id = setInterval(() => setHighlight(h => (h + 1) % 4), 2800);
    return () => clearInterval(id);
  }, []);
  return (
    <div style={{
      background: "#fff", border: `1px solid ${C_RULE}`, borderRadius: 12,
      padding: "16px 4px 12px 4px", height: "100%",
      display: "flex", flexDirection: "column",
    }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "0 16px", marginBottom: 12 }}>
        <CEyebrow color={C_DIM} style={{ fontSize: 10 }}>Recent activity</CEyebrow>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 5 }}>
          <CDot color={C_FUCHSIA} size={5} pulse />
          <CMono size={9} color={C_FUCHSIA} style={{ letterSpacing: "0.18em", fontWeight: 700 }}>LIVE</CMono>
        </span>
      </div>
      <div style={{ flex: 1, overflowY: "auto", padding: "0 12px" }}>
        {ACTIVITY.map((a, i) => {
          const icon = ACT_ICON[a.kind];
          const isHot = i === 0 && highlight === 0;
          return (
            <div key={i} style={{
              display: "flex", gap: 10, padding: "10px 8px",
              borderBottom: i < ACTIVITY.length - 1 ? `1px dashed ${C_RULE_S}` : "none",
              background: isHot ? C_FUCHSIA + "08" : "transparent",
              borderRadius: 8, transition: "background 0.5s ease",
            }}>
              <div style={{
                width: 26, height: 26, borderRadius: 7, flexShrink: 0,
                background: icon.color + "16",
                border: `1px solid ${icon.color}33`,
                display: "flex", alignItems: "center", justifyContent: "center",
              }}>
                <CIcon name={icon.name} size={12} color={icon.color} strokeWidth={2} />
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 3, flexWrap: "wrap" }}>
                  <span style={{ fontSize: 12.5, color: C_INK, fontWeight: 600 }}>{a.title}</span>
                  {a.channel && <ChannelBadge id={a.channel} />}
                  <span style={{ flex: 1 }} />
                  <CMono size={9.5} color={C_FAINT} style={{ letterSpacing: "0.06em" }}>{a.time}</CMono>
                </div>
                <div style={{
                  fontSize: 11.5, color: C_DIM, lineHeight: 1.45,
                  display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden",
                }}>{a.body}</div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function OverviewBody() {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1fr) 340px", gap: 22 }}>
      <div>
        <UpcomingStay />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }}>
          {STATS_TOP.map((s, i) => <StatTile key={i} s={s} />)}
        </div>
        <SectionTitle>Email engagement</SectionTitle>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }}>
          {EMAIL_TILES.map((t, i) => <MetricTile key={i} t={t} />)}
        </div>
        <SectionTitle>Inbox engagement</SectionTitle>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }}>
          {INBOX_TILES.map((t, i) => <MetricTile key={i} t={t} />)}
        </div>
        <ChannelChart />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12, marginTop: 14 }}>
          {AI_ROW.map((t, i) => <MetricTile key={i} t={t} />)}
        </div>
      </div>
      <div style={{ minHeight: 600 }}>
        <ActivityFeed />
      </div>
    </div>
  );
}

// ────────────────────────── CONTACT INFO ──────────────────────────
function FieldGrid({ rows }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", rowGap: 16, columnGap: 32 }}>
      {rows.map(([k, v], i) => (
        <div key={i}>
          <CMono size={10} color={C_FAINT} style={{ letterSpacing: "0.14em", fontWeight: 600, display: "block", marginBottom: 4 }}>
            {k.toUpperCase()}
          </CMono>
          <div style={{ fontSize: 13.5, color: C_INK, fontWeight: 500, letterSpacing: "-0.005em" }}>{v}</div>
        </div>
      ))}
    </div>
  );
}

function Toggle({ on }) {
  return (
    <span style={{
      display: "inline-block", width: 38, height: 22, borderRadius: 999,
      background: on ? C_INK : "#cfc4c4", position: "relative", transition: "background 0.2s",
      flexShrink: 0,
    }}>
      <span style={{
        position: "absolute", top: 2, left: on ? 18 : 2,
        width: 18, height: 18, borderRadius: "50%", background: "#fff",
        boxShadow: "0 1px 3px rgba(0,0,0,0.18)", transition: "left 0.2s",
      }} />
    </span>
  );
}

function ConsentRow({ icon, title, desc, badge, on, locked }) {
  return (
    <div style={{
      display: "grid", gridTemplateColumns: "1fr auto", alignItems: "center", gap: 18,
      padding: "12px 16px", border: `1px solid ${C_RULE}`, borderRadius: 10,
      background: "#fff", marginBottom: 8,
    }}>
      <div>
        <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 3 }}>
          <CIcon name={icon} size={13} color={C_INK} strokeWidth={1.9} />
          <span style={{ fontSize: 13, color: C_INK, fontWeight: 700 }}>{title}</span>
          <span style={{
            padding: "1px 7px", borderRadius: 4,
            background: badge === "Always On" ? C_FUCHSIA_WASH : "#1a1a1a",
            color: badge === "Always On" ? C_FUCHSIA_DEEP : "#fff",
            fontFamily: C_MONO, fontSize: 8.5, fontWeight: 700, letterSpacing: "0.06em",
          }}>{badge}</span>
        </div>
        <div style={{ fontSize: 11.5, color: C_DIM, lineHeight: 1.4 }}>{desc}</div>
      </div>
      <Toggle on={on} />
    </div>
  );
}

function ReachPill({ id, on }) {
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 6,
      padding: "5px 11px", borderRadius: 999,
      background: on ? C_OK_BG : "#f5f1e3",
      color: on ? C_OK : C_DIM,
      border: `1px solid ${on ? C_OK + "55" : C_RULE}`,
      fontSize: 11.5, fontWeight: 600,
    }}>
      <CIcon name="wifi" size={11} color={on ? C_OK : C_DIM} strokeWidth={2} />
      {CHANNELS[id]?.label || id}
    </span>
  );
}

function ContactInfoBody() {
  return (
    <div>
      <Panel icon="user" title="Personal Data" action={
        <button style={{
          padding: "6px 11px", borderRadius: 7, background: "transparent",
          border: `1px solid ${C_RULE}`, fontSize: 11.5, color: C_INK, fontWeight: 600,
          cursor: "pointer", display: "inline-flex", alignItems: "center", gap: 5,
        }}><CIcon name="edit" size={11} color={C_INK} strokeWidth={2} /> Edit</button>
      }>
        <FieldGrid rows={PERSONAL_FIELDS} />
      </Panel>

      <Panel icon="log" title="System Information">
        <FieldGrid rows={SYS_FIELDS} />
      </Panel>

      <Panel icon="wifi" title="Reachability">
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
          <ReachPill id="whatsapp" on />
          <ReachPill id="email" on />
          <ReachPill id="instagram" on />
          <ReachPill id="webchat" on />
          <ReachPill id="sms" on={false} />
          <span style={{
            padding: "5px 11px", borderRadius: 999,
            background: C_FUCHSIA_WASH, color: C_FUCHSIA_DEEP,
            border: `1px solid ${C_FUCHSIA}55`,
            fontSize: 11.5, fontWeight: 700,
            display: "inline-flex", alignItems: "center", gap: 6,
          }}>
            <CIcon name="check" size={11} color={C_FUCHSIA_DEEP} strokeWidth={2.4} />
            Any Channel
          </span>
        </div>
      </Panel>

      <Panel icon="shield" title="Subscription Status" action={
        <button style={{
          padding: "6px 11px", borderRadius: 7, background: "transparent",
          border: `1px solid ${C_RULE}`, fontSize: 11.5, color: C_INK, fontWeight: 600,
          cursor: "pointer", display: "inline-flex", alignItems: "center", gap: 5,
        }}><CIcon name="alert" size={11} color={C_INK} strokeWidth={2} /> Unsubscribe</button>
      }>
        <div style={{ display: "flex", alignItems: "center", gap: 16, flexWrap: "wrap" }}>
          <span style={{
            display: "inline-flex", alignItems: "center", gap: 6,
            padding: "5px 12px", borderRadius: 999, background: C_INK, color: "#fff",
            fontSize: 11.5, fontWeight: 700,
          }}>
            <CIcon name="check-circle" size={11} color="#fff" strokeWidth={2.2} />
            Active
          </span>
          <span style={{ fontSize: 12.5, color: C_DIM }}>This contact can receive messages.</span>
          <span style={{ flex: 1 }} />
          <CMono size={11} color={C_FAINT}>last updated 16 May 2026 · 12:36</CMono>
        </div>
        <div style={{ marginTop: 12, paddingTop: 12, borderTop: `1px dashed ${C_RULE_S}`, display: "flex", alignItems: "center", justifyContent: "center" }}>
          <button style={{
            display: "inline-flex", alignItems: "center", gap: 6,
            padding: "5px 12px", border: "none", background: "transparent",
            color: C_DIM, fontSize: 11.5, cursor: "pointer", fontWeight: 600,
          }}>
            <CIcon name="history" size={11} color={C_DIM} strokeWidth={2} />
            View consent history
          </button>
        </div>
      </Panel>

      <Panel icon="lock" title="Channel Marketing Consent">
        <ConsentRow icon="chat"  title="WhatsApp Marketing" badge="Consented" desc="Allow sending promotional WhatsApp messages (broadcasts, marketing journeys)." on />
        <ConsentRow icon="mail"  title="Email Marketing"    badge="Consented" desc="Allow sending promotional emails and campaigns." on />
        <ConsentRow icon="send"  title="Instagram DM"       badge="Consented" desc="Allow promotional messages on Instagram DM." on />
        <div style={{ fontSize: 11, color: C_FAINT, marginTop: 6, fontStyle: "italic" }}>
          Utility messages (booking confirmations, transactional) are always sent regardless of consent.
        </div>
      </Panel>

      <Panel icon="mail" title="Email Preferences">
        <ConsentRow icon="gift"     title="Promotional"   badge="Subscribed" desc="Special offers, discounts, and exclusive deals." on />
        <ConsentRow icon="send"     title="Newsletter"    badge="Subscribed" desc="Regular updates, tips, and curated content." on />
        <ConsentRow icon="alert"    title="Announcements" badge="Subscribed" desc="New features, service updates, and important news." on />
        <ConsentRow icon="check"    title="Transactional" badge="Always On"  desc="Booking confirmations, receipts, and account updates." on locked />
      </Panel>

      <div style={{
        background: "#fff", border: `1px solid #f4d3d3`, borderRadius: 12,
        padding: "16px 20px", marginTop: 18,
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
          <CIcon name="alert" size={14} color={C_DANGER} strokeWidth={2} />
          <span style={{ color: C_DANGER, fontSize: 13, fontWeight: 700 }}>Danger Zone</span>
        </div>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 14 }}>
          <div>
            <div style={{ fontSize: 13, color: C_INK, fontWeight: 600, marginBottom: 2 }}>Delete this contact</div>
            <div style={{ fontSize: 11.5, color: C_DIM }}>Permanently delete this contact and all associated data. This action cannot be undone.</div>
          </div>
          <button style={{
            padding: "8px 14px", borderRadius: 7, background: C_DANGER, color: "#fff",
            border: "none", fontSize: 12, fontWeight: 700, cursor: "pointer",
            display: "inline-flex", alignItems: "center", gap: 6,
          }}>
            <CIcon name="trash" size={11} color="#fff" strokeWidth={2.2} />
            Delete
          </button>
        </div>
      </div>
    </div>
  );
}

// ────────────────────────── RESERVATIONS ──────────────────────────
const RESV_STATUS_COLOR = {
  Confirmed:  { fg: C_OK,    bg: C_OK_BG,   border: C_OK + "55" },
  CheckedOut: { fg: C_PAST,  bg: C_PAST_BG, border: C_PAST + "55" },
  Cancelled:  { fg: C_OFF,   bg: C_HOLD_BG, border: C_OFF + "55" },
};

function ReservationsBody() {
  return (
    <div>
      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 16 }}>
        <CIcon name="calendar" size={16} color={C_INK} strokeWidth={1.9} />
        <span style={{ fontSize: 15, color: C_INK, fontWeight: 700 }}>Reservation History</span>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12, marginBottom: 18 }}>
        {RESV_STATS.map((s, i) => <StatTile key={i} s={s} />)}
      </div>

      {/* search + filter */}
      <div style={{ display: "flex", gap: 10, marginBottom: 14 }}>
        <div style={{
          flex: 1, display: "flex", alignItems: "center", gap: 8,
          padding: "8px 12px", background: "#fff", border: `1px solid ${C_RULE}`, borderRadius: 8,
        }}>
          <CIcon name="search" size={13} color={C_DIM} strokeWidth={1.9} />
          <span style={{ fontSize: 12, color: C_FAINT }}>Search reservations…</span>
        </div>
        <button style={{
          display: "inline-flex", alignItems: "center", gap: 6,
          padding: "8px 14px", background: "#fff", border: `1px solid ${C_RULE}`, borderRadius: 8,
          fontSize: 12, color: C_INK, fontWeight: 600, cursor: "pointer",
        }}>
          <CIcon name="filter" size={12} color={C_INK} strokeWidth={2} />
          All Statuses
          <CIcon name="chevron" size={10} color={C_DIM} strokeWidth={2} />
        </button>
      </div>

      <div style={{
        background: "#fff", border: `1px solid ${C_RULE}`, borderRadius: 12, overflow: "hidden",
      }}>
        <div style={{
          display: "grid",
          gridTemplateColumns: "1.2fr 1.2fr 2fr 1fr 1fr 1fr 1.1fr 0.8fr",
          padding: "11px 18px", borderBottom: `1px solid ${C_RULE}`,
          background: C_PAPER,
          fontFamily: C_MONO, fontSize: 9.5, letterSpacing: "0.16em", fontWeight: 700, color: C_FAINT,
        }}>
          <span>DATES</span><span>RESERVATION ID</span><span>ROOM TYPE</span>
          <span style={{ textAlign: "right" }}>REVENUE</span>
          <span style={{ textAlign: "right" }}>EXTRAS</span>
          <span style={{ textAlign: "right" }}>TOTAL</span>
          <span>STATUS</span><span style={{ textAlign: "right" }}>ACTIONS</span>
        </div>
        {RESV.map((r, i) => {
          const sc = RESV_STATUS_COLOR[r.status];
          return (
            <div key={r.id} style={{
              display: "grid",
              gridTemplateColumns: "1.2fr 1.2fr 2fr 1fr 1fr 1fr 1.1fr 0.8fr",
              padding: "13px 18px", borderBottom: i < RESV.length - 1 ? `1px solid ${C_RULE_S}` : "none",
              alignItems: "center", fontSize: 12.5, color: C_INK,
            }}>
              <div>
                <div style={{ fontWeight: 600 }}>{r.from}</div>
                <CMono size={10} color={C_DIM}>{r.to}</CMono>
                <CMono size={10} color={C_FAINT} style={{ display: "block", marginTop: 2 }}>{r.nts} nights</CMono>
              </div>
              <div>
                <CMono size={11} color={C_INK} style={{ fontWeight: 700 }}>{r.id}</CMono>
                <CMono size={9.5} color={C_FAINT} style={{ display: "block", marginTop: 2 }}>{CHANNELS[r.src]?.label}</CMono>
              </div>
              <div>
                <div style={{ fontWeight: 600 }}>{r.room}</div>
                <CMono size={10} color={C_DIM}>{GUEST.hotel}</CMono>
              </div>
              <span style={{ textAlign: "right", fontWeight: 700, fontFamily: C_MONO, fontSize: 12 }}>{r.rev}</span>
              <span style={{ textAlign: "right", fontFamily: C_MONO, fontSize: 12, color: r.extras === "-" ? C_FAINT : C_INK }}>{r.extras}</span>
              <span style={{ textAlign: "right", fontWeight: 700, fontFamily: C_MONO, fontSize: 12 }}>{r.total}</span>
              <span>
                <span style={{
                  display: "inline-flex", alignItems: "center", gap: 5,
                  padding: "3px 9px", borderRadius: 999,
                  background: sc.bg, color: sc.fg, border: `1px solid ${sc.border}`,
                  fontFamily: C_MONO, fontSize: 9.5, fontWeight: 700, letterSpacing: "0.06em",
                }}>
                  <CDot color={sc.fg} size={4} />
                  {r.status}
                </span>
              </span>
              <div style={{ textAlign: "right" }}>
                <button style={{
                  padding: "5px 10px", borderRadius: 6, border: `1px solid ${C_RULE}`,
                  background: "#fff", fontSize: 11, color: C_INK, fontWeight: 600,
                  cursor: "pointer", display: "inline-flex", alignItems: "center", gap: 5,
                }}>
                  <CIcon name="eye" size={11} color={C_INK} strokeWidth={2} /> View
                </button>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ────────────────────────── CHANNELS ──────────────────────────
function ConvCard({ c }) {
  const cc = CHANNELS[c.channel];
  return (
    <div style={{
      background: "#fff", border: `1px solid ${C_RULE}`, borderRadius: 10,
      padding: "13px 16px",
      display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 16, alignItems: "center",
    }}>
      <div style={{
        width: 40, height: 40, borderRadius: 9, flexShrink: 0,
        background: cc.bg, border: `1px solid ${cc.border}`,
        display: "flex", alignItems: "center", justifyContent: "center",
      }}>
        <CIcon name={c.channel === "voice" ? "phone" : c.channel === "email" ? "mail" : "chat"} size={17} color={cc.fg} strokeWidth={1.8} />
      </div>
      <div style={{ minWidth: 0 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 5 }}>
          <ChannelBadge id={c.channel} />
          {c.ai && (
            <span style={{
              padding: "2px 7px", borderRadius: 4,
              background: C_FUCHSIA_WASH, color: C_FUCHSIA_DEEP, border: `1px solid ${C_FUCHSIA}33`,
              fontFamily: C_MONO, fontSize: 9, fontWeight: 700, letterSpacing: "0.1em",
            }}>AI</span>
          )}
          <CMono size={10} color={C_FAINT}>{c.msgs} messages</CMono>
          <span style={{ flex: 1 }} />
          <CMono size={10.5} color={C_FAINT}>{c.time}</CMono>
        </div>
        <div style={{
          fontSize: 12.5, color: C_INK, lineHeight: 1.4,
          whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis",
        }}>{c.preview}</div>
      </div>
      <button style={{
        padding: "6px 11px", borderRadius: 6,
        background: "#fff", border: `1px solid ${C_RULE}`,
        fontSize: 11.5, color: C_INK, fontWeight: 600, cursor: "pointer",
      }}>open</button>
    </div>
  );
}

function ChannelsBody() {
  const [sub, setSub] = cUseState("conversations");
  const subTabs = [
    { id: "conversations", label: "Conversations", count: 5 },
    { id: "calls",         label: "Calls",         count: 12 },
    { id: "escalations",   label: "Escalations",   count: 2 },
    { id: "campaigns",     label: "Campaigns",     count: 8 },
    { id: "journeys",      label: "Journeys",      count: 5 },
  ];
  return (
    <div>
      <div style={{
        display: "flex", alignItems: "center", gap: 6, marginBottom: 16,
        padding: 5, background: "#efeadd", border: `1px solid ${C_RULE}`, borderRadius: 9,
        width: "fit-content",
      }}>
        {subTabs.map(t => {
          const on = t.id === sub;
          return (
            <button key={t.id} onClick={() => setSub(t.id)} style={{
              padding: "7px 13px", borderRadius: 6, border: "none",
              background: on ? "#fff" : "transparent",
              boxShadow: on ? "0 1px 0 rgba(0,0,0,0.04), 0 4px 10px -8px rgba(0,0,0,0.18)" : "none",
              fontSize: 12, fontWeight: on ? 700 : 500,
              color: on ? C_INK : "#7a6f70", cursor: "pointer",
              display: "inline-flex", alignItems: "center", gap: 6,
            }}>
              {t.label}
              <span style={{
                padding: "1px 6px", borderRadius: 999,
                background: on ? C_INK : C_RULE_S, color: on ? "#fff" : C_DIM,
                fontFamily: C_MONO, fontSize: 9, fontWeight: 700,
              }}>{t.count}</span>
            </button>
          );
        })}
      </div>

      {sub === "conversations" && <ConvList />}
      {sub === "calls"         && <CallsList />}
      {sub === "escalations"   && <EscalationsList />}
      {sub === "campaigns"     && <CampaignsList />}
      {sub === "journeys"      && <JourneysList />}
    </div>
  );
}

function ConvList() {
  return (
    <>
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 14 }}>
        <CEyebrow color={C_DIM} style={{ fontSize: 10 }}>Conversations · all channels</CEyebrow>
        <span style={{ flex: 1, height: 1, background: C_RULE_S }} />
        <span style={{ display: "inline-flex", alignItems: "center", gap: 5 }}>
          <CDot color={C_FUCHSIA} size={5} pulse />
          <CMono size={9.5} color={C_FUCHSIA} style={{ letterSpacing: "0.18em", fontWeight: 700 }}>STREAMING</CMono>
        </span>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        {CONVERSATIONS.map((c, i) => <ConvCard key={i} c={c} />)}
      </div>
    </>
  );
}

const CALLS_SEED = [
  { dur: "3 m 14 s", outcome: "Booked",        when: "yesterday",         direction: "Inbound",  topic: "Spa · Aphrodite ritual"  },
  { dur: "1 m 47 s", outcome: "Information",   when: "4 days ago",        direction: "Inbound",  topic: "Cycling route from hotel" },
  { dur: "2 m 02 s", outcome: "Information",   when: "1 week ago",        direction: "Inbound",  topic: "Late check-out availability" },
  { dur: "4 m 31 s", outcome: "Booked",        when: "2 weeks ago",       direction: "Inbound",  topic: "Suite upgrade · May stay" },
  { dur: "0 m 41 s", outcome: "Voicemail",     when: "3 weeks ago",       direction: "Outbound", topic: "Pre-stay welcome call" },
  { dur: "2 m 18 s", outcome: "Information",   when: "1 month ago",       direction: "Inbound",  topic: "Gluten-free breakfast options" },
];

function CallsList() {
  const outColor = { Booked: C_FUCHSIA, Information: C_INK_SOFT, Voicemail: C_PLUM };
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
      {CALLS_SEED.map((c, i) => (
        <div key={i} style={{
          background: "#fff", border: `1px solid ${C_RULE}`, borderRadius: 10,
          padding: "12px 16px",
          display: "grid", gridTemplateColumns: "auto 1fr auto auto", gap: 16, alignItems: "center",
        }}>
          <div style={{
            width: 36, height: 36, borderRadius: 8, flexShrink: 0,
            background: CHANNELS.voice.bg, border: `1px solid ${CHANNELS.voice.border}`,
            display: "flex", alignItems: "center", justifyContent: "center",
          }}>
            <CIcon name="phone" size={15} color={CHANNELS.voice.fg} strokeWidth={1.8} />
          </div>
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }}>
              <ChannelBadge id="voice" />
              <span style={{
                padding: "2px 7px", borderRadius: 4,
                background: "#f5f1e3", color: C_INK, border: `1px solid ${C_RULE}`,
                fontFamily: C_MONO, fontSize: 9, fontWeight: 700, letterSpacing: "0.06em",
              }}>{c.direction.toUpperCase()}</span>
              <CMono size={10} color={C_FAINT}>{c.dur}</CMono>
            </div>
            <div style={{ fontSize: 13, color: C_INK, fontWeight: 600 }}>{c.topic}</div>
          </div>
          <span style={{
            padding: "3px 9px", borderRadius: 999,
            background: outColor[c.outcome] + "16",
            color: outColor[c.outcome],
            border: `1px solid ${outColor[c.outcome]}44`,
            fontFamily: C_MONO, fontSize: 9.5, fontWeight: 700, letterSpacing: "0.06em",
          }}>{c.outcome}</span>
          <CMono size={10.5} color={C_FAINT}>{c.when}</CMono>
        </div>
      ))}
    </div>
  );
}

const ESC_SEED = [
  { topic: "Beach-front cabana 7B · 22 May", chan: "instagram", ago: "43 min ago", to: "pool@aurelia.example", commitment: "Reply by tomorrow 10:00", state: "Email fired" },
  { topic: "Special diet · gluten + lactose · group of 4", chan: "whatsapp", ago: "yesterday", to: "fnb@aurelia.example", commitment: "Confirmation before arrival", state: "Acknowledged" },
];

function EscalationsList() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      {ESC_SEED.map((e, i) => (
        <div key={i} style={{
          background: "linear-gradient(135deg, #fff 0%, #fdf3f7 100%)",
          border: `1px solid ${C_FUCHSIA}33`, borderRadius: 12,
          padding: "14px 18px", position: "relative", overflow: "hidden",
        }}>
          <div style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: 4, background: C_FUCHSIA }} />
          <div style={{ display: "flex", alignItems: "center", gap: 9, marginBottom: 8, flexWrap: "wrap" }}>
            <CIcon name="alert" size={14} color={C_FUCHSIA} strokeWidth={2} />
            <CEyebrow color={C_FUCHSIA} style={{ fontSize: 10 }}>AI Escalation</CEyebrow>
            <ChannelBadge id={e.chan} />
            <span style={{
              padding: "2px 8px", borderRadius: 4, background: C_INK, color: "#fff",
              fontFamily: C_MONO, fontSize: 9, fontWeight: 700, letterSpacing: "0.08em",
            }}>{e.state.toUpperCase()}</span>
            <span style={{ flex: 1 }} />
            <CMono size={10} color={C_FAINT}>{e.ago}</CMono>
          </div>
          <div style={{ fontFamily: C_SERIF, fontSize: 15, color: C_INK, lineHeight: 1.5, marginBottom: 8 }}>
            {e.topic}
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
            <CMono size={10.5} color={C_DIM}>{e.commitment}</CMono>
            <span style={{ color: C_FAINT }}>·</span>
            <CMono size={10.5} color={C_DIM}>{e.to}</CMono>
          </div>
        </div>
      ))}
    </div>
  );
}

const CAMP_SEED = [
  { name: "Returning Guest · May",        chan: "email",     status: "Delivered", date: "16 May",  opens: "1/1", clicks: "1/1" },
  { name: "Cabana Upsell · Instagram",    chan: "instagram", status: "Sent",      date: "12 May",  opens: "-",   clicks: "-" },
  { name: "Pre-Stay Welcome · WhatsApp",  chan: "whatsapp",  status: "Read",      date: "18 May",  opens: "1/1", clicks: "-" },
  { name: "Vegan Menu Spotlight",         chan: "email",     status: "Delivered", date: "02 May",  opens: "1/1", clicks: "1/1" },
  { name: "Loyalty Tier Reminder",        chan: "metaads",   status: "Impression",date: "28 Apr",  opens: "-",   clicks: "-" },
];

function CampaignsList() {
  return (
    <div style={{
      background: "#fff", border: `1px solid ${C_RULE}`, borderRadius: 12, overflow: "hidden",
    }}>
      <div style={{
        display: "grid", gridTemplateColumns: "2.4fr 1fr 1fr 0.7fr 0.7fr 0.8fr",
        padding: "11px 18px", borderBottom: `1px solid ${C_RULE}`, background: C_PAPER,
        fontFamily: C_MONO, fontSize: 9.5, letterSpacing: "0.16em", fontWeight: 700, color: C_FAINT,
      }}>
        <span>CAMPAIGN</span><span>CHANNEL</span><span>STATUS</span>
        <span style={{ textAlign: "right" }}>OPENS</span>
        <span style={{ textAlign: "right" }}>CLICKS</span>
        <span style={{ textAlign: "right" }}>DATE</span>
      </div>
      {CAMP_SEED.map((c, i) => (
        <div key={i} style={{
          display: "grid", gridTemplateColumns: "2.4fr 1fr 1fr 0.7fr 0.7fr 0.8fr",
          padding: "12px 18px", borderBottom: i < CAMP_SEED.length - 1 ? `1px solid ${C_RULE_S}` : "none",
          alignItems: "center", fontSize: 12.5, color: C_INK,
        }}>
          <span style={{ fontWeight: 600 }}>{c.name}</span>
          <span><ChannelBadge id={c.chan} /></span>
          <span><CMono size={11} color={C_INK} style={{ fontWeight: 700 }}>{c.status.toUpperCase()}</CMono></span>
          <CMono size={11} color={C_INK} style={{ textAlign: "right" }}>{c.opens}</CMono>
          <CMono size={11} color={C_INK} style={{ textAlign: "right" }}>{c.clicks}</CMono>
          <CMono size={11} color={C_FAINT} style={{ textAlign: "right" }}>{c.date}</CMono>
        </div>
      ))}
    </div>
  );
}

const JOUR_SEED = [
  { name: "Pre-Stay Welcome",            status: "Completed", steps: 5, done: 5, last: "Vegan menu captured" },
  { name: "Confirmación de Reserva",     status: "Completed", steps: 4, done: 4, last: "Confirmation sent · WhatsApp" },
  { name: "Returning Guest Win-Back",    status: "Active",    steps: 6, done: 3, last: "Personalised offer queued" },
  { name: "In-Stay · Day-2 Check-in",    status: "Scheduled", steps: 3, done: 0, last: "Triggers on check-in + 24h" },
  { name: "Post-Stay · Review Request",  status: "Scheduled", steps: 2, done: 0, last: "Triggers on check-out + 4h" },
];

function JourneysList() {
  const sCol = { Completed: C_FUCHSIA_DEEP, Active: C_FUCHSIA, Scheduled: C_PLUM };
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
      {JOUR_SEED.map((j, i) => (
        <div key={i} style={{
          background: "#fff", border: `1px solid ${C_RULE}`, borderRadius: 10,
          padding: "13px 16px",
          display: "grid", gridTemplateColumns: "auto 1.5fr 1fr auto", gap: 18, alignItems: "center",
        }}>
          <div style={{
            width: 36, height: 36, borderRadius: 8, flexShrink: 0,
            background: sCol[j.status] + "16", border: `1px solid ${sCol[j.status]}44`,
            display: "flex", alignItems: "center", justifyContent: "center",
          }}>
            <CIcon name={j.status === "Scheduled" ? "clock" : j.status === "Active" ? "spark" : "check-circle"} size={15} color={sCol[j.status]} strokeWidth={1.9} />
          </div>
          <div>
            <div style={{ fontSize: 13, color: C_INK, fontWeight: 700, marginBottom: 3 }}>{j.name}</div>
            <CMono size={10.5} color={C_DIM}>{j.last}</CMono>
          </div>
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }}>
              <CMono size={10} color={C_FAINT} style={{ letterSpacing: "0.14em", fontWeight: 700 }}>STEPS</CMono>
              <CMono size={11} color={C_INK} style={{ fontWeight: 700 }}>{j.done}/{j.steps}</CMono>
            </div>
            <div style={{ height: 5, background: C_CREAM, borderRadius: 3, overflow: "hidden" }}>
              <div style={{
                width: `${(j.done / j.steps) * 100}%`, height: "100%",
                background: sCol[j.status], borderRadius: 3,
              }} />
            </div>
          </div>
          <span style={{
            padding: "3px 10px", borderRadius: 999,
            background: sCol[j.status] + "16", color: sCol[j.status],
            border: `1px solid ${sCol[j.status]}44`,
            fontFamily: C_MONO, fontSize: 9.5, fontWeight: 700, letterSpacing: "0.06em",
          }}>{j.status}</span>
        </div>
      ))}
    </div>
  );
}

// ────────────────────────── MEMORY ──────────────────────────
function MemSummary() {
  return (
    <div style={{
      background: "#fff", border: `1px solid ${C_RULE}`, borderRadius: 12,
      padding: "16px 20px", marginBottom: 14, position: "relative", overflow: "hidden",
    }}>
      <div style={{ position: "absolute", inset: 0, background:
        `linear-gradient(135deg, ${C_FUCHSIA}06 0%, transparent 35%, transparent 65%, ${C_PLUM}06 100%)`,
        pointerEvents: "none",
      }} />
      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 8, position: "relative" }}>
        <CIcon name="brain" size={16} color={C_FUCHSIA} strokeWidth={1.9} />
        <CEyebrow color={C_FUCHSIA} style={{ fontSize: 10.5 }}>AI · Guest Summary</CEyebrow>
        <span style={{ flex: 1 }} />
        <CMono size={10} color={C_FAINT} style={{ letterSpacing: "0.14em" }}>UPDATED 8 MIN AGO</CMono>
      </div>
      <div style={{
        fontFamily: C_SERIF, fontSize: 16.5, color: C_INK, lineHeight: 1.5,
        position: "relative", letterSpacing: "-0.005em",
      }}>
        Anouk is a <span style={{ color: C_FUCHSIA_DEEP, fontWeight: 600 }}>repeat sea-view guest</span> who
        travels with her partner Bram on cycling holidays, she brings her own road bike. She is
        <span style={{ color: C_FUCHSIA_DEEP, fontWeight: 600 }}> vegan and lactose intolerant</span>,
        always asks about cycling routes, and responds to WhatsApp within five minutes.
        She has engaged with our cabana content on Instagram twice this month -
        a clear upsell opening for her May stay.
      </div>
    </div>
  );
}

function PrefChip({ label, color = C_FUCHSIA }) {
  return (
    <span style={{
      display: "inline-block", padding: "5px 11px", borderRadius: 999,
      background: color + "14", color, border: `1px solid ${color}40`,
      fontSize: 12, fontWeight: 600, letterSpacing: "-0.005em",
    }}>{label}</span>
  );
}

function MemPanel({ title, icon, color, items }) {
  return (
    <div style={{
      background: "#fff", border: `1px solid ${C_RULE}`, borderRadius: 12,
      padding: "14px 18px 16px",
    }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 10 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <CIcon name={icon} size={13} color={color} strokeWidth={2} />
          <span style={{ fontSize: 12.5, color: C_INK, fontWeight: 700 }}>{title}</span>
        </div>
        <CMono size={10} color={C_FAINT}>{items.length}</CMono>
      </div>
      <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
        {items.map((it, i) => <PrefChip key={i} label={it} color={color} />)}
      </div>
    </div>
  );
}

function MemStatTile({ s }) {
  return (
    <div style={{
      background: "#fff", border: `1px solid ${C_RULE}`, borderRadius: 10, padding: "12px 14px",
    }}>
      <CMono size={9.5} color={C_FAINT} style={{ letterSpacing: "0.16em", fontWeight: 700, display: "block", marginBottom: 6 }}>
        {s.lbl.toUpperCase()}
      </CMono>
      <div style={{
        fontFamily: C_SERIF, fontSize: 22, fontWeight: 600, color: s.color || C_INK,
        letterSpacing: "-0.015em",
      }}>{s.val}</div>
    </div>
  );
}

function MemoryCard({ m }) {
  const col = MEM_TYPE_COLOR[m.type] || C_FUCHSIA;
  return (
    <div style={{
      background: "#fff", border: `1px solid ${C_RULE}`, borderRadius: 10,
      padding: "13px 16px 14px",
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap", marginBottom: 8 }}>
        <span style={{
          padding: "3px 9px", borderRadius: 4,
          background: col + "16", color: col, border: `1px solid ${col}55`,
          fontFamily: C_MONO, fontSize: 9.5, fontWeight: 700, letterSpacing: "0.08em",
        }}>{m.type.toUpperCase()}</span>
        <span style={{
          padding: "3px 8px", borderRadius: 4,
          background: "#f5f1e3", color: C_INK, border: `1px solid ${C_RULE}`,
          fontFamily: C_MONO, fontSize: 9.5, fontWeight: 600,
        }}>importance · {m.importance}/10</span>
        <span style={{
          padding: "3px 8px", borderRadius: 4,
          color: m.confidence === "High" ? C_FUCHSIA : C_PLUM,
          background: (m.confidence === "High" ? C_FUCHSIA : C_PLUM) + "12",
          border: `1px solid ${(m.confidence === "High" ? C_FUCHSIA : C_PLUM)}40`,
          fontFamily: C_MONO, fontSize: 9.5, fontWeight: 700,
        }}>{m.confidence} confidence</span>
        <span style={{ flex: 1 }} />
        <button style={{
          width: 24, height: 24, borderRadius: 6, border: `1px solid ${C_RULE}`,
          background: "#fff", color: C_FAINT, cursor: "pointer",
          display: "flex", alignItems: "center", justifyContent: "center",
        }}>
          <CIcon name="trash" size={12} color={C_FAINT} strokeWidth={1.8} />
        </button>
      </div>
      <div style={{
        fontFamily: C_SERIF, fontSize: 14.5, color: C_INK, lineHeight: 1.45,
        letterSpacing: "-0.005em", marginBottom: 10,
      }}>{m.body}</div>
      <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
        <CMono size={10} color={C_FAINT}>captured {m.time}</CMono>
        <span style={{ color: C_FAINT }}>·</span>
        <ChannelBadge id={m.channel} />
      </div>
    </div>
  );
}

function MemoryBody() {
  return (
    <div>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 14 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <CIcon name="brain" size={17} color={C_INK} strokeWidth={1.8} />
          <span style={{ fontSize: 16, color: C_INK, fontWeight: 700 }}>Guest Memory</span>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <button style={{
            display: "inline-flex", alignItems: "center", gap: 6,
            padding: "7px 12px", borderRadius: 7, background: C_INK,
            color: "#fff", border: "none", fontSize: 12, fontWeight: 600, cursor: "pointer",
          }}>
            <CIcon name="sparkles" size={12} color="#fff" strokeWidth={2} />
            Add Memory
          </button>
          <button style={{
            display: "inline-flex", alignItems: "center", gap: 6,
            padding: "7px 12px", borderRadius: 7,
            background: "#fff", color: C_DANGER, border: `1px solid ${C_DANGER}40`,
            fontSize: 12, fontWeight: 600, cursor: "pointer",
          }}>
            <CIcon name="alert" size={12} color={C_DANGER} strokeWidth={2} />
            Forget Guest
          </button>
        </div>
      </div>

      <MemSummary />

      <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr 1fr", gap: 12, marginBottom: 16 }}>
        <MemPanel title="Key Preferences" icon="heart"  color={C_FUCHSIA}      items={MEM_PREFS} />
        <MemPanel title="Key Interests"   icon="spark"  color={C_FUCHSIA_DEEP} items={MEM_INTERESTS} />
        <MemPanel title="Guest Context"   icon="users"  color={C_PLUM}         items={MEM_CONTEXT} />
      </div>

      <div style={{
        background: "#fff", border: `1px solid ${C_RULE}`, borderRadius: 12,
        padding: "14px 18px 16px", marginBottom: 18,
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 9, marginBottom: 12 }}>
          <CIcon name="trending" size={13} color={C_INK} strokeWidth={2} />
          <span style={{ fontSize: 12.5, color: C_INK, fontWeight: 700 }}>Memory Stats</span>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 10 }}>
          {MEM_STATS.map((s, i) => <MemStatTile key={i} s={s} />)}
        </div>
      </div>

      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 10 }}>
        <CEyebrow color={C_DIM} style={{ fontSize: 10 }}>All memories</CEyebrow>
        <span style={{ flex: 1, height: 1, background: C_RULE_S }} />
        <CMono size={10} color={C_FAINT} style={{ letterSpacing: "0.14em" }}>SHOWING {MEM_LIST.length} OF 24</CMono>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        {MEM_LIST.map((m, i) => <MemoryCard key={i} m={m} />)}
      </div>
    </div>
  );
}

// ────────────────────────── WEBSITE BEHAVIOUR ──────────────────────────
function WebsiteBehaviourBody() {
  return (
    <div>
      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 14 }}>
        <CIcon name="compass" size={16} color={C_INK} strokeWidth={1.9} />
        <span style={{ fontSize: 15, color: C_INK, fontWeight: 700 }}>Website Behaviour</span>
        <span style={{ flex: 1 }} />
        <span style={{ display: "inline-flex", alignItems: "center", gap: 5 }}>
          <CDot color={C_FUCHSIA} size={5} pulse />
          <CMono size={9.5} color={C_FUCHSIA} style={{ letterSpacing: "0.18em", fontWeight: 700 }}>SESSION ACTIVE NOW</CMono>
        </span>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12, marginBottom: 18 }}>
        {WB_TILES.map((t, i) => <MetricTile key={i} t={t} />)}
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 14 }}>
        <Panel icon="bar" title="Top pages · last 90 days">
          {WB_PAGES.map((p, i) => (
            <div key={i} style={{
              display: "grid", gridTemplateColumns: "1fr auto auto", gap: 16, alignItems: "center",
              padding: "10px 0", borderBottom: i < WB_PAGES.length - 1 ? `1px dashed ${C_RULE_S}` : "none",
            }}>
              <div style={{ minWidth: 0 }}>
                <CMono size={11.5} color={C_INK} style={{ fontWeight: 600 }}>{p.page}</CMono>
              </div>
              <div style={{ width: 130, height: 6, background: C_CREAM, borderRadius: 3, overflow: "hidden" }}>
                <div style={{
                  height: "100%", width: `${(p.views / 38) * 100}%`,
                  background: `linear-gradient(90deg, ${C_FUCHSIA_SOFT}, ${C_FUCHSIA})`,
                }} />
              </div>
              <CMono size={11} color={C_INK} style={{ fontWeight: 700, width: 60, textAlign: "right" }}>
                {p.views} <span style={{ color: C_FAINT, fontWeight: 500 }}>· {p.avg}</span>
              </CMono>
            </div>
          ))}
        </Panel>

        <Panel icon="filter" title="Booking funnel">
          {WB_FUNNEL.map((f, i) => {
            const isLast = i === WB_FUNNEL.length - 1;
            return (
              <div key={i} style={{ marginBottom: isLast ? 0 : 12 }}>
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 5 }}>
                  <span style={{ fontSize: 12, color: C_INK, fontWeight: 600 }}>{f.step}</span>
                  <CMono size={10.5} color={C_FAINT}>{f.n} · {f.pct}%</CMono>
                </div>
                <div style={{
                  height: 22, background: C_CREAM, borderRadius: 5,
                  overflow: "hidden", position: "relative",
                }}>
                  <div style={{
                    width: `${f.pct}%`, height: "100%",
                    background: i === WB_FUNNEL.length - 1
                      ? `linear-gradient(90deg, ${C_FUCHSIA}, ${C_FUCHSIA_DEEP})`
                      : `linear-gradient(90deg, ${C_FUCHSIA_SOFT}, ${C_FUCHSIA})`,
                    borderRadius: 5,
                  }} />
                </div>
              </div>
            );
          })}
        </Panel>
      </div>

      <Panel icon="globe" title="Devices · sessions">
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          {WB_DEVICES.map((d, i) => (
            <div key={i} style={{ display: "grid", gridTemplateColumns: "160px 1fr auto", gap: 14, alignItems: "center" }}>
              <span style={{ fontSize: 12, color: C_INK, fontWeight: 600 }}>{d.d}</span>
              <div style={{ height: 8, background: C_CREAM, borderRadius: 4, overflow: "hidden" }}>
                <div style={{ width: `${d.pct}%`, height: "100%", background: C_FUCHSIA }} />
              </div>
              <CMono size={11} color={C_INK} style={{ fontWeight: 700, width: 44, textAlign: "right" }}>{d.pct}%</CMono>
            </div>
          ))}
        </div>
      </Panel>

      <div style={{
        background: `linear-gradient(135deg, ${C_FUCHSIA_WASH} 0%, #fff 100%)`,
        border: `1px solid ${C_FUCHSIA}33`, borderRadius: 12,
        padding: "14px 18px", marginTop: 4,
        display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 14, alignItems: "center",
      }}>
        <div style={{
          width: 34, height: 34, borderRadius: 8,
          background: C_FUCHSIA, color: "#fff",
          display: "flex", alignItems: "center", justifyContent: "center",
        }}>
          <CIcon name="cursor" size={15} color="#fff" strokeWidth={2} />
        </div>
        <div>
          <div style={{ fontSize: 12.5, color: C_INK, fontWeight: 700, marginBottom: 2 }}>
            Browsing right now · /cala-marina/cabanas
          </div>
          <CMono size={10.5} color={C_DIM}>iPhone · Safari · Amsterdam · 3rd page this session</CMono>
        </div>
        <button style={{
          padding: "7px 13px", borderRadius: 7, background: C_FUCHSIA, color: "#fff",
          border: "none", fontSize: 11.5, fontWeight: 700, cursor: "pointer",
          display: "inline-flex", alignItems: "center", gap: 6,
        }}>
          <CIcon name="send" size={11} color="#fff" strokeWidth={2.2} />
          Trigger live offer
        </button>
      </div>
    </div>
  );
}

// ────────────────────────── LANGUAGES ──────────────────────────
function LanguagesBody() {
  return (
    <div>
      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 14 }}>
        <CIcon name="globe" size={16} color={C_INK} strokeWidth={1.9} />
        <span style={{ fontSize: 15, color: C_INK, fontWeight: 700 }}>Languages detected</span>
      </div>

      <div style={{
        background: `linear-gradient(135deg, ${C_FUCHSIA} 0%, ${C_FUCHSIA_DEEP} 100%)`,
        borderRadius: 12, padding: "20px 22px", marginBottom: 16, color: "#fff",
        boxShadow: `0 16px 32px -18px ${C_FUCHSIA}AA`,
        display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 22, alignItems: "center",
      }}>
        <div style={{
          width: 64, height: 64, borderRadius: 14,
          background: "rgba(255,255,255,0.18)",
          border: "1px solid rgba(255,255,255,0.35)",
          display: "flex", alignItems: "center", justifyContent: "center",
          fontFamily: C_SERIF, fontSize: 26, fontWeight: 700, fontStyle: "italic",
        }}>EN</div>
        <div>
          <CMono size={10} color="rgba(255,255,255,0.8)" style={{ letterSpacing: "0.18em", fontWeight: 700 }}>PRIMARY LANGUAGE</CMono>
          <div style={{ fontFamily: C_SERIF, fontSize: 28, fontWeight: 600, letterSpacing: "-0.02em", margin: "6px 0 4px" }}>
            English
          </div>
          <CMono size={11} color="rgba(255,255,255,0.85)">used in 78% of all messages · 64 messages</CMono>
        </div>
        <div style={{ textAlign: "right" }}>
          <CMono size={10} color="rgba(255,255,255,0.7)" style={{ letterSpacing: "0.14em" }}>AI REPLIES IN</CMono>
          <div style={{ fontFamily: C_SERIF, fontSize: 22, fontWeight: 700, marginTop: 4 }}>English</div>
        </div>
      </div>

      <Panel icon="bar" title="Detected languages">
        {LANG_DETECTED.map((l, i) => (
          <div key={l.code} style={{
            display: "grid", gridTemplateColumns: "44px 1fr 1fr auto auto", gap: 16, alignItems: "center",
            padding: "11px 0", borderBottom: i < LANG_DETECTED.length - 1 ? `1px dashed ${C_RULE_S}` : "none",
          }}>
            <div style={{
              width: 36, height: 36, borderRadius: 8,
              background: l.primary ? C_FUCHSIA_WASH : C_PAPER,
              border: `1px solid ${l.primary ? C_FUCHSIA + "44" : C_RULE}`,
              display: "flex", alignItems: "center", justifyContent: "center",
              fontFamily: C_SERIF, fontSize: 13, fontWeight: 700, fontStyle: "italic",
              color: l.primary ? C_FUCHSIA_DEEP : C_INK,
            }}>{l.code}</div>
            <div>
              <div style={{ fontSize: 13, color: C_INK, fontWeight: 600 }}>{l.name}</div>
              <CMono size={10.5} color={C_FAINT}>{l.msgs} messages</CMono>
            </div>
            <div style={{ height: 8, background: C_CREAM, borderRadius: 4, overflow: "hidden" }}>
              <div style={{
                width: `${l.pct}%`, height: "100%",
                background: l.primary ? C_FUCHSIA : C_FUCHSIA_PALE,
                borderRadius: 4,
              }} />
            </div>
            <CMono size={11} color={C_INK} style={{ fontWeight: 700, width: 44, textAlign: "right" }}>{l.pct}%</CMono>
            {l.primary ? (
              <span style={{
                padding: "3px 9px", borderRadius: 999,
                background: C_FUCHSIA_WASH, color: C_FUCHSIA_DEEP, border: `1px solid ${C_FUCHSIA}44`,
                fontFamily: C_MONO, fontSize: 9, fontWeight: 700, letterSpacing: "0.1em",
              }}>PRIMARY</span>
            ) : <span style={{ width: 60 }} />}
          </div>
        ))}
      </Panel>

      <Panel icon="send" title="Language mix by channel">
        <div style={{ display: "flex", flexDirection: "column", gap: 11 }}>
          {LANG_BY_CH.map((row, i) => (
            <div key={i} style={{ display: "grid", gridTemplateColumns: "150px 1fr", alignItems: "center", gap: 16 }}>
              <ChannelBadge id={row.ch} />
              <div style={{
                display: "flex", height: 16, borderRadius: 4, overflow: "hidden",
                border: `1px solid ${C_RULE}`,
              }}>
                {row.langs.map((l, j) => {
                  const tone = l.c === "EN" ? C_FUCHSIA
                    : l.c === "NL" ? C_FUCHSIA_SOFT
                    : l.c === "ES" ? C_PLUM : C_FUCHSIA_DARK;
                  return (
                    <div key={j} style={{
                      width: `${l.p}%`, background: tone,
                      display: "flex", alignItems: "center", justifyContent: "center",
                      fontFamily: C_MONO, fontSize: 9, fontWeight: 700, color: "#fff",
                      letterSpacing: "0.08em",
                    }}>{l.p >= 18 ? `${l.c} ${l.p}%` : ""}</div>
                  );
                })}
              </div>
            </div>
          ))}
        </div>
      </Panel>

      <div style={{
        padding: "12px 18px", background: C_PAPER, border: `1px solid ${C_RULE}`,
        borderRadius: 10, fontSize: 12, color: C_DIM, lineHeight: 1.5,
        display: "flex", alignItems: "center", gap: 10,
      }}>
        <CIcon name="spark" size={14} color={C_FUCHSIA} strokeWidth={2} />
        AI auto-switches reply language per message. If she pings in Dutch on WhatsApp, the reply
        comes back in Dutch within the same conversation thread.
      </div>
    </div>
  );
}

// ────────────────────────── shell ──────────────────────────
function ContactShowcase() {
  const [tab, setTab] = cUseState("overview");

  return (
    <section data-screen-label="Contact data showcase" style={{
      position: "relative",
      background: C_CREAM,
      color: C_INK,
      fontFamily: "'Inter', system-ui, sans-serif",
      padding: "80px clamp(20px,4vw,48px) 96px",
      overflow: "hidden",
    }}>
      <div style={{
        position: "absolute", top: -100, right: -200, width: 700, height: 600,
        background: `radial-gradient(ellipse, ${C_FUCHSIA}11 0%, transparent 60%)`,
        filter: "blur(50px)", pointerEvents: "none",
      }} />

      <div style={{ maxWidth: "var(--rail)", margin: "0 auto 36px", textAlign: "center" }}>
        <div className="eyebrow" style={{ justifyContent: "center" }}>
          Inside the unified profile
        </div>
        <h2 className="h-2" style={{ marginTop: 16 }}>
          A contact page that{" "}
          <em className="italic-accent" style={{ display: "block" }}>
            remembers everything.
          </em>
        </h2>
        <p className="lead" style={{ maxWidth: 720, margin: "20px auto 0" }}>
          Every reservation, every message, every memory. One screen.
          Click between the seven tabs to explore engagement KPIs, marketing consent,
          full reservation history, conversations across WhatsApp, Web Chat, Voice,
          Instagram and email, AI-curated memory, on-site behaviour and language mix.
        </p>
      </div>

      <ScaleFrame nativeWidth={1216} style={{ maxWidth: 1216, margin: "0 auto" }}>
      <div style={{
        maxWidth: "var(--rail)", margin: "0 auto",
        borderRadius: 14, overflow: "hidden",
        background: C_PAPER, border: `1px solid ${C_RULE}`,
        boxShadow:
          "0 40px 80px -40px rgba(20,14,10,0.25), 0 8px 24px -16px rgba(20,14,10,0.12), 0 0 0 1px rgba(255,255,255,0.5) inset",
        position: "relative",
      }}>
        <MockTopBar />
        <div style={{ display: "grid", gridTemplateColumns: "220px 1fr", height: 1180 }}>
          <Sidebar />
          <div style={{
            background: C_CREAM, padding: "28px 32px 0",
            borderLeft: `1px solid ${C_RULE_S}`,
            display: "flex", flexDirection: "column", minHeight: 0,
          }}>
            <ContactHeader />
            <TabNav active={tab} onChange={setTab} />
            <div
              className="gm-scroll"
              key={tab}
              style={{
                flex: 1, minHeight: 0,
                overflowY: "auto",
                paddingRight: 14,
                paddingBottom: 36,
                marginRight: -14,
                animation: "gm-fadein 0.35s ease",
              }}
            >
              {tab === "overview"  && <OverviewBody />}
              {tab === "contact"   && <ContactInfoBody />}
              {tab === "stays"     && <ReservationsBody />}
              {tab === "channels"  && <ChannelsBody />}
              {tab === "memory"    && <MemoryBody />}
              {tab === "behaviour" && <WebsiteBehaviourBody />}
              {tab === "languages" && <LanguagesBody />}
            </div>
          </div>
        </div>
      </div>
      </ScaleFrame>

      <div style={{
        maxWidth: "var(--rail)", margin: "26px auto 0",
        display: "flex", alignItems: "center", justifyContent: "center", gap: 14,
        flexWrap: "wrap", color: C_DIM, fontSize: 12.5,
      }}>
        <CIcon name="check-circle" size={13} color={C_FUCHSIA} strokeWidth={2} />
        <span>All seven tabs are live, click any tab to explore.</span>
      </div>
    </section>
  );
}

function Sidebar() {
  const items = [
    { lbl: "Home",         icon: "compass" },
    { lbl: "DATA",         icon: "user",     header: true },
    { lbl: "Contacts",     icon: "users",    indent: true, active: true },
    { lbl: "Segments",     icon: "tag",      indent: true },
    { lbl: "Tags",         icon: "tag",      indent: true },
    { lbl: "Custom Fields",icon: "edit",     indent: true },
    { lbl: "Bookings",     icon: "calendar", indent: true },
    { lbl: "Reservations", icon: "bed",      indent: true },
    { lbl: "CHANNELS",     icon: "send",     header: true },
    { lbl: "AI AGENTS",    icon: "spark",    header: true },
    { lbl: "CDP",          icon: "brain",    header: true },
    { lbl: "LOYALTY",      icon: "gift",     header: true },
  ];
  return (
    <div style={{
      background: C_PAPER, borderRight: `1px solid ${C_RULE_S}`,
      padding: "22px 14px 28px",
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 22, padding: "0 6px" }}>
        <div style={{
          width: 26, height: 26, borderRadius: 7,
          background: `linear-gradient(135deg, ${C_FUCHSIA}, ${C_FUCHSIA_DEEP})`,
          display: "flex", alignItems: "center", justifyContent: "center",
        }}><GMMark size={16} color="white" /></div>
        <span style={{ fontSize: 14, color: C_INK, fontWeight: 700, letterSpacing: "-0.005em" }}>GuestMaker</span>
      </div>

      <div style={{
        height: 30, marginBottom: 20, padding: "0 10px",
        display: "flex", alignItems: "center",
        background: "#fff", border: `1px solid ${C_RULE}`, borderRadius: 8,
      }}>
        <CIcon name="building" size={14} color={C_FUCHSIA} strokeWidth={1.8} />
        <span style={{ marginLeft: 8, fontSize: 12, color: C_INK, fontWeight: 700, letterSpacing: "0.02em" }}>
          {BRAND}
        </span>
        <span style={{ flex: 1 }} />
        <CIcon name="chevron" size={11} color={C_FAINT} strokeWidth={2} />
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
        {items.map((it, i) => (
          <div key={i} style={{
            display: "flex", alignItems: "center", gap: 9,
            padding: it.header ? "10px 8px 6px" : "8px 8px",
            paddingLeft: it.indent ? 22 : 8,
            marginTop: it.header && i > 0 ? 8 : 0,
            borderRadius: 7,
            background: it.active ? C_FUCHSIA + "14" : "transparent",
            color: it.active ? C_FUCHSIA_DEEP : (it.header ? C_FAINT : C_INK),
            fontSize: it.header ? 9.5 : 12.5,
            fontWeight: it.header || it.active ? 700 : 500,
            letterSpacing: it.header ? "0.16em" : "-0.005em",
            cursor: it.active ? "default" : "pointer",
          }}>
            <CIcon name={it.icon} size={it.header ? 11 : 13}
              color={it.active ? C_FUCHSIA : (it.header ? C_FAINT : C_DIM)}
              strokeWidth={1.9} />
            {it.lbl}
            {it.header && <CIcon name="chevron" size={10} color={C_FAINT} strokeWidth={2} style={{ marginLeft: "auto" }} />}
          </div>
        ))}
      </div>
    </div>
  );
}

window.ContactShowcase = ContactShowcase;