/* ============================================================
 * Icon set, custom strokes, not Lucide stock.
 * Use stroke="currentColor". Sized 1em by default.
 * ============================================================ */

/* NO OBJECT REST SPREAD IN HERE — it silently breaks every icon.
 *
 * These files are <script type="text/babel"> compiled in the browser, and
 * they all share ONE global scope. Babel emits a top-level `_excluded`
 * const per file for `{...rest}` destructuring. icons.jsx loads first and
 * declares its own; shared.jsx loads next and OVERWRITES the global with
 * Reveal's list ("children,delay,as,className,style").
 *
 * So `IconBase`'s rest stopped excluding size and stroke, both landed in
 * `rest`, and both were spread onto the <svg> — where stroke={1.6}
 * overrode stroke="currentColor". 1.6 is not a colour, so the paths drew
 * with no paint and every icon called with a stroke prop rendered as an
 * empty box, sitewide. Nothing errors; the icon is simply not there.
 *
 * Reading props explicitly avoids _objectWithoutProperties entirely, so
 * this cannot be broken again by whatever loads after it.
 *
 * This wrapper was named plain `Icon` and exported to `window.Icon` until
 * three "ported" files — crm-omni-hero.jsx, hotel-cdp.jsx, b2b-kit.jsx —
 * each declared their OWN unrelated, name-lookup `function Icon(...)` for
 * their own bespoke diagrams. Same shared global scope as above: whichever
 * one loaded last on a given page silently became THE `Icon` every
 * IconArrow/IconCheck/etc. in this file renders through. On crm.html,
 * cdp.html and crm-b2b.html specifically, that meant every icon built on
 * this wrapper — including the nav's own mega-menu arrows and the "Book a
 * demo" arrow — rendered nothing: the fiber tree still had an IconArrow
 * node, but IconBase-formerly-Icon had become a name-keyed lookup with no
 * `name` prop supplied, so it resolved nothing and returned null. Renamed
 * to something none of those files would ever pick, so the collision can't
 * recur — those three keep their own local `Icon` for their own diagrams,
 * unaffected. */
const IconBase = (props) => {
  const { children, size = 18, stroke = 1.6 } = props;
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill={props.fill || "none"}
      stroke={props.color || "currentColor"}
      strokeWidth={stroke}
      strokeLinecap="round"
      strokeLinejoin="round"
      className={props.className}
      style={props.style}
      aria-hidden="true"
    >
      {children}
    </svg>
  );
};

/* Channel marks, simplified, recognizable */
const IconWhatsApp = (p) => (
  <IconBase {...p} stroke="0" fill="currentColor">
    <path d="M12 2a10 10 0 0 0-8.6 15l-1.4 5 5.1-1.3A10 10 0 1 0 12 2zm5.1 14.2c-.2.6-1.2 1.2-1.7 1.3-.5.1-1 .1-3.2-.7-2.7-1-4.4-3.7-4.5-3.9-.1-.2-1-1.4-1-2.6 0-1.2.6-1.8.9-2.1.2-.2.5-.3.7-.3h.5c.2 0 .4 0 .6.5l.9 2c.1.2.1.4 0 .6-.1.2-.2.3-.3.5l-.4.5c-.1.1-.2.3-.1.5.2.3.8 1.3 1.7 2 1.2 1.1 2.2 1.4 2.4 1.5.2.1.4.1.5-.1l.7-.8c.2-.2.3-.2.5-.1l1.7.8c.2.1.4.2.5.3 0 .1 0 .8-.2 1.2z" />
  </IconBase>
);
const IconInstagram = (p) => (
  <IconBase {...p} stroke="0" fill="currentColor">
    {/* Solid rounded square with cut-outs for ring + lens + dot, proper IG mark */}
    <path fillRule="evenodd" clipRule="evenodd" d="M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm5 6.2a3.8 3.8 0 1 0 0 7.6 3.8 3.8 0 0 0 0-7.6zm0 1.6a2.2 2.2 0 1 1 0 4.4 2.2 2.2 0 0 1 0-4.4zm5.6-3.4a1 1 0 1 0 0 2 1 1 0 0 0 0-2z" />
  </IconBase>
);
const IconFacebook = (p) => (
  <IconBase {...p} stroke="0" fill="currentColor">
    <path d="M22 12a10 10 0 1 0-11.6 9.9V15h-2.5v-3h2.5V9.6c0-2.5 1.5-3.9 3.7-3.9 1.1 0 2.2.2 2.2.2v2.4h-1.2c-1.2 0-1.6.8-1.6 1.6V12h2.7l-.4 3h-2.3v6.9A10 10 0 0 0 22 12z" />
  </IconBase>
);
/* Generic OTA messaging: a globe (the marketplace) carrying a message
   bubble. Deliberately NOT IconBooking — that is Booking.com's own "B."
   mark, and the channel is being presented as OTA messaging rather than
   one named OTA. IconBooking stays for the places that really do mean
   Booking.com: the integrations catalogue, and reservation-source data
   in the CRM sections. */
const IconOta = (p) => (
  <IconBase {...p} stroke="0" fill="currentColor">
    <path fillRule="evenodd" clipRule="evenodd" d="M11 2a9 9 0 0 0 0 18h.6a5.5 5.5 0 0 1-.55-2.4c0-.2 0-.4.03-.6H4.2a7.2 7.2 0 0 1-.15-1.4h7.1a5.55 5.55 0 0 1 1.5-1.8H4.05c.05-.5.14-1 .27-1.45h6.36c.1-.85.28-1.65.52-2.35H5.2A7.25 7.25 0 0 1 8.3 4.7c-.5.85-.9 1.9-1.15 3.1h1.9C9.6 5.6 10.4 4.2 11 4.2zm2 0v2.2c.55 0 1.3 1.3 1.85 3.5A5.5 5.5 0 0 1 20 12.7V11a9 9 0 0 0-7-8.8zM16.5 14a3.5 3.5 0 0 0 0 7h4a1.5 1.5 0 0 0 1.5-1.5v-2a3.5 3.5 0 0 0-3.5-3.5z" />
  </IconBase>
);
const IconBooking = (p) => (
  <IconBase {...p} stroke="0" fill="currentColor">
    {/* Booking.com, filled rounded square containing a "B." mark cut out */}
    <path fillRule="evenodd" clipRule="evenodd" d="M5 2h14a3 3 0 0 1 3 3v14a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V5a3 3 0 0 1 3-3zm3.6 4.5v11h4.6c1.95 0 3.55-1.3 3.55-3.15 0-1.2-.7-2.15-1.7-2.55.55-.4.95-1.1.95-1.95 0-1.85-1.55-3.35-3.5-3.35h-3.9zm1.95 1.85h1.85c.85 0 1.55.65 1.55 1.5s-.7 1.5-1.55 1.5h-1.85v-3zm0 4.85h2.05c1 0 1.7.7 1.7 1.6s-.7 1.55-1.7 1.55h-2.05v-3.15zm7.95 3.15a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
  </IconBase>
);
const IconEmail = (p) => (
  <IconBase {...p} stroke="0" fill="currentColor">
    {/* Filled envelope, solid silhouette with subtle flap cut */}
    <path fillRule="evenodd" clipRule="evenodd" d="M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zm0 1.8c-.1 0-.2 0-.2.05L12 12.7l8.2-6.85a.5.5 0 0 0-.2-.05H4zm-.2 1.7v10.3c0 .15.1.2.2.2h16c.1 0 .2-.05.2-.2V7.5l-7.6 6.4a.95.95 0 0 1-1.2 0L3.8 7.5z" />
  </IconBase>
);
const IconWeb = (p) => (
  <IconBase {...p} stroke="0" fill="currentColor">
    {/* Filled globe with longitude / equator carved as cut-outs */}
    <path fillRule="evenodd" clipRule="evenodd" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 1.8c1 0 2.2 1.4 2.95 4h-5.9C9.8 5.2 11 3.8 12 3.8zm-4.95 4c.55-1.7 1.3-3.05 2.2-3.85a8.2 8.2 0 0 0-4.5 3.85h2.3zm9.9 0h2.3a8.2 8.2 0 0 0-4.5-3.85c.9.8 1.65 2.15 2.2 3.85zm-12.6 1.7a8.2 8.2 0 0 0-.55 2.7H6.2a18 18 0 0 1 .25-2.7H4.35zm3.85 0a16 16 0 0 0-.3 2.7h6.2a16 16 0 0 0-.3-2.7H8.2zm7.65 0c.15.85.25 1.75.3 2.7h2.35a8.2 8.2 0 0 0-.55-2.7H15.85zM4.35 12.9c.05.95.25 1.85.55 2.7h2.1a18 18 0 0 1-.25-2.7H4.35zm3.85 0c.05.95.15 1.85.3 2.7h6.6c.15-.85.25-1.75.3-2.7H8.2zm9.65 0a18 18 0 0 1-.25 2.7h2.1c.3-.85.5-1.75.55-2.7h-2.4zM5.25 17.3a8.2 8.2 0 0 0 4.5 3.85c-.9-.8-1.65-2.15-2.2-3.85h-2.3zm4 0c.75 2.6 1.95 4 2.95 4s2.2-1.4 2.95-4H9.25zm7.6 0c-.55 1.7-1.3 3.05-2.2 3.85a8.2 8.2 0 0 0 4.5-3.85h-2.3z" />
  </IconBase>
);
const IconVoice = (p) => (
  <IconBase {...p} stroke="0" fill="currentColor">
    {/* Filled phone handset, solid silhouette */}
    <path d="M6.6 2.5a2 2 0 0 0-2.85.4L2.5 4.55a3 3 0 0 0-.4 3.1c1.55 3.5 3.7 6.6 6.4 9.3a23 23 0 0 0 9.3 6.4 3 3 0 0 0 3.1-.4l1.65-1.25a2 2 0 0 0 .4-2.85l-2.05-2.55a2 2 0 0 0-2.55-.55l-2.1 1.05a1 1 0 0 1-1.15-.2 18 18 0 0 1-4.2-4.2 1 1 0 0 1-.2-1.15l1.05-2.1a2 2 0 0 0-.55-2.55L6.6 2.5z" />
  </IconBase>
);

/* Meta Socials — Instagram and Facebook as one channel.
   Drawn as the Meta infinity mark rather than two logos crammed together:
   at 20px, an IG square next to an FB circle is mush, and the whole point
   of merging them is that the hotel sees ONE channel. */
const IconMetaSocials = (p) => (
  <IconBase {...p} stroke="0" fill="currentColor">
    <path fillRule="evenodd" clipRule="evenodd" d="M6.4 5.6c-2.4 0-4.4 2.6-4.4 6s2 6 4.4 6c1.6 0 2.9-1 4.1-2.6l1.5-2.1 1.5 2.1c1.2 1.6 2.5 2.6 4.1 2.6 2.4 0 4.4-2.6 4.4-6s-2-6-4.4-6c-1.6 0-2.9 1-4.1 2.6L12 10.3l-1.5-2.1C9.3 6.6 8 5.6 6.4 5.6zm0 2.2c.8 0 1.6.6 2.4 1.7l1.5 2.1-1.5 2.1c-.8 1.1-1.6 1.7-2.4 1.7-1.1 0-2.2-1.6-2.2-3.8s1.1-3.8 2.2-3.8zm11.2 0c1.1 0 2.2 1.6 2.2 3.8s-1.1 3.8-2.2 3.8c-.8 0-1.6-.6-2.4-1.7l-1.5-2.1 1.5-2.1c.8-1.1 1.6-1.7 2.4-1.7z" />
  </IconBase>
);

/* Web chatbot — a bubble inside a browser frame. The old mark was a globe
   built from a 40-node path with carved longitudes; at 20px it collapsed
   into a grey disc, and "globe" says internet, not chatbot. */
const IconWebChat = (p) => (
  <IconBase {...p} stroke="0" fill="currentColor">
    <path fillRule="evenodd" clipRule="evenodd" d="M4 3h16a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm0 1.8a.2.2 0 0 0-.2.2v1.4h16.4V5a.2.2 0 0 0-.2-.2H4zm-.2 3.4V19c0 .11.09.2.2.2h16a.2.2 0 0 0 .2-.2V8.2H3.8zM7 10.6h10a.9.9 0 0 1 .9.9v3.4a.9.9 0 0 1-.9.9h-5.6l-2.3 1.9a.4.4 0 0 1-.65-.31V15.8H7a.9.9 0 0 1-.9-.9v-3.4a.9.9 0 0 1 .9-.9z" />
  </IconBase>
);

/* Email INBOUND — an open tray receiving. Distinct at a glance from the
   outbound mark, which matters now that email is two separate cards. */
const IconInbox = (p) => (
  <IconBase {...p} stroke="0" fill="currentColor">
    <path fillRule="evenodd" clipRule="evenodd" d="M12 2.4a1 1 0 0 1 1 1v5.18l1.75-1.75a1 1 0 1 1 1.4 1.42l-3.45 3.44a1 1 0 0 1-1.4 0L7.85 8.25a1 1 0 1 1 1.4-1.42L11 8.58V3.4a1 1 0 0 1 1-1zM4.3 12.5h3.2a1 1 0 0 1 .9.55l.85 1.7a1 1 0 0 0 .9.55h3.7a1 1 0 0 0 .9-.55l.85-1.7a1 1 0 0 1 .9-.55h3.2a2 2 0 0 1 2 2v4.6a2 2 0 0 1-2 2H4.3a2 2 0 0 1-2-2v-4.6a2 2 0 0 1 2-2z" />
  </IconBase>
);

/* Email OUTBOUND — a send mark, for campaigns going out.
   Named IconEmailOut, not IconSend: a stroke-weight IconSend already
   exists further down this file, and these scripts share one global
   scope, so a second declaration takes the whole file out. */
const IconEmailOut = (p) => (
  <IconBase {...p} stroke="0" fill="currentColor">
    <path fillRule="evenodd" clipRule="evenodd" d="M21.3 2.75a1 1 0 0 1 .23 1.05l-6.5 17a1 1 0 0 1-1.85.06l-3.16-7.02-7.02-3.16a1 1 0 0 1 .06-1.85l17-6.5a1 1 0 0 1 1.05.23l.19.19zM18.4 6.2 6.6 10.7l4.62 2.08 1.9-1.9a1 1 0 1 1 1.42 1.42l-1.9 1.9 2.08 4.62L18.4 6.2z" />
  </IconBase>
);

const channelIcon = {
  whatsapp: IconWhatsApp,
  instagram: IconInstagram,
  facebook: IconFacebook,
  meta: IconMetaSocials,
  booking: IconBooking,
  ota: IconOta,
  email: IconEmail,
  emailIn: IconInbox,
  emailOut: IconEmailOut,
  web: IconWeb,
  webchat: IconWebChat,
  voice: IconVoice,
};
const channelHue = {
  whatsapp: "var(--c-whatsapp)",
  instagram: "var(--c-instagram)",
  facebook: "var(--c-facebook)",
  meta: "var(--c-instagram)",
  booking: "var(--c-booking)",
  ota: "var(--c-booking)",
  email: "var(--c-email)",
  emailIn: "var(--c-email)",
  emailOut: "var(--accent)",
  web: "var(--c-web)",
  webchat: "var(--c-web)",
  voice: "var(--c-voice)",
};
/* Every key in channelIcon needs a key here too — ChannelChip renders
   channelLabel[kind] directly, so a missing entry prints the string
   "undefined" into the chip rather than failing loudly. meta / webchat /
   emailIn / emailOut were added to the icon and hue maps for the channel
   cards and were missing here. */
const channelLabel = {
  whatsapp: "WhatsApp",
  instagram: "Instagram",
  facebook: "Facebook",
  meta: "Meta Socials",
  booking: "Booking.com",
  ota: "OTA Messaging",
  email: "Email",
  /* These four must read EXACTLY as the channel-card titles in
     section-bigidea.jsx — the journey timeline labels the same six channels
     and a visitor scrolling from one to the other should not have to work
     out that "Email Inbox" and "Email Inbound" are the same thing. */
  emailIn: "Email Inbound",
  emailOut: "Email Outbound",
  web: "Web Chat",
  webchat: "Web Chatbot",
  voice: "Voice",
};

/* UI icons */
const IconArrow = (p) => (
  <IconBase {...p}><path d="M5 12h14M13 6l6 6-6 6" /></IconBase>
);
const IconArrowDown = (p) => (
  <IconBase {...p}><path d="M12 5v14M6 13l6 6 6-6" /></IconBase>
);
const IconCheck = (p) => (
  <IconBase {...p}><path d="M5 12l5 5L19 7" /></IconBase>
);
const IconSpark = (p) => (
  <IconBase {...p}>
    <path d="M12 2v6M12 16v6M2 12h6M16 12h6" />
    <path d="M5 5l4 4M15 15l4 4M5 19l4-4M15 9l4-4" />
  </IconBase>
);
const IconBrain = (p) => (
  <IconBase {...p}>
    <path d="M9 4a3 3 0 0 0-3 3v0a3 3 0 0 0-2 5v0a3 3 0 0 0 2 5v0a3 3 0 0 0 3 3h.5a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H9z" />
    <path d="M15 4a3 3 0 0 1 3 3v0a3 3 0 0 1 2 5v0a3 3 0 0 1-2 5v0a3 3 0 0 1-3 3h-.5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2H15z" />
  </IconBase>
);
const IconChannels = (p) => (
  <IconBase {...p}>
    <circle cx="12" cy="12" r="2.5" />
    <circle cx="4" cy="6" r="1.5" />
    <circle cx="20" cy="6" r="1.5" />
    <circle cx="4" cy="18" r="1.5" />
    <circle cx="20" cy="18" r="1.5" />
    <path d="M5.3 7l5 4M18.7 7l-5 4M5.3 17l5-4M18.7 17l-5-4" />
  </IconBase>
);
const IconEngine = (p) => (
  <IconBase {...p}>
    <rect x="3" y="3" width="18" height="6" rx="1.5" />
    <rect x="3" y="11" width="18" height="6" rx="1.5" />
    <circle cx="7" cy="6" r="0.8" fill="currentColor" stroke="none" />
    <circle cx="7" cy="14" r="0.8" fill="currentColor" stroke="none" />
    <path d="M3 21h18" />
  </IconBase>
);
const IconRoute = (p) => (
  <IconBase {...p}>
    <circle cx="6" cy="6" r="2" />
    <circle cx="18" cy="18" r="2" />
    <path d="M8 6h6a4 4 0 0 1 4 4v6" />
  </IconBase>
);
const IconSearch = (p) => (
  <IconBase {...p}><circle cx="11" cy="11" r="7" /><path d="M21 21l-4.3-4.3" /></IconBase>
);
const IconBell = (p) => (
  <IconBase {...p}><path d="M6 8a6 6 0 1 1 12 0c0 7 3 7 3 9H3c0-2 3-2 3-9z" /><path d="M10 21a2 2 0 0 0 4 0" /></IconBase>
);
const IconClose = (p) => (
  <IconBase {...p}><path d="M6 6l12 12M18 6L6 18" /></IconBase>
);
const IconSend = (p) => (
  <IconBase {...p}><path d="M3 11l18-8-8 18-2-8-8-2z" /></IconBase>
);
const IconMail = (p) => (
  <IconBase {...p}><rect x="3" y="5" width="18" height="14" rx="2" /><path d="M3 7l9 6 9-6" /></IconBase>
);
const IconLang = (p) => (
  <IconBase {...p}><circle cx="12" cy="12" r="9" /><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18" /></IconBase>
);
const IconBuilding = (p) => (
  <IconBase {...p}><rect x="4" y="3" width="16" height="18" rx="1" /><path d="M9 7h2M9 11h2M9 15h2M13 7h2M13 11h2M13 15h2" /></IconBase>
);
const IconPin = (p) => (
  <IconBase {...p}><path d="M12 22s7-7.5 7-13a7 7 0 1 0-14 0c0 5.5 7 13 7 13z" /><circle cx="12" cy="9" r="2.5" /></IconBase>
);
const IconPencil = (p) => (
  <IconBase {...p}><path d="M4 20l4-1 11-11-3-3L5 16l-1 4z" /></IconBase>
);
const IconStays = (p) => (
  <IconBase {...p}><path d="M3 21V8l9-5 9 5v13" /><path d="M9 21v-7h6v7" /></IconBase>
);
const IconMoon = (p) => (
  <IconBase {...p}><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z" /></IconBase>
);

/* Added for the pricing page. Kept in the same stroke idiom as the rest —
   24px box, no fills, so they inherit `stroke` and `size` like every other
   icon here. */
const IconShield = (p) => (
  <IconBase {...p}><path d="M12 3l7 3v5.5c0 4.3-2.9 8.2-7 9.5-4.1-1.3-7-5.2-7-9.5V6z" /></IconBase>
);
const IconClock = (p) => (
  <IconBase {...p}><circle cx="12" cy="12" r="9" /><path d="M12 7v5.2l3.2 2" /></IconBase>
);
const IconLayers = (p) => (
  <IconBase {...p}><path d="M12 3l8 4.5-8 4.5-8-4.5z" /><path d="M4 12.5l8 4.5 8-4.5" /><path d="M4 16.8l8 4.5 8-4.5" /></IconBase>
);
const IconInfinity = (p) => (
  <IconBase {...p}><path d="M7.5 9a3 3 0 1 0 0 6c2.5 0 3.5-6 6-6a3 3 0 1 1 0 6c-2.5 0-3.5-6-6-6z" /></IconBase>
);
const IconPlus = (p) => (
  <IconBase {...p}><path d="M12 5v14M5 12h14" /></IconBase>
);

Object.assign(window, {
  IconBase,
  /* Alias kept so anything still reading the bare global `Icon` (nothing in
     this file does any more) gets the same function it always did, rather
     than newly finding `undefined` and throwing where it used to just
     render blank. */
  Icon: IconBase,
  IconWhatsApp, IconInstagram, IconFacebook, IconBooking, IconOta, IconEmail, IconWeb, IconVoice,
  IconArrow, IconArrowDown, IconCheck, IconSpark, IconBrain, IconChannels, IconEngine, IconRoute,
  IconSearch, IconBell, IconClose, IconSend,
  IconMail, IconLang, IconBuilding, IconPin, IconPencil, IconStays, IconMoon,
  IconShield, IconClock, IconLayers, IconInfinity, IconPlus,
  channelIcon, channelHue, channelLabel,
});