/* ============================================================
 * CRM page, visual components
 * Hero composition, sub-module mockups, supporting visuals.
 * Each component owns its own scoped styles (.crm-*).
 * ============================================================ */
const { useState, useEffect } = React;

/* === HERO VISUAL =====================================================
 * Layered composition, contact card with stats, conversation snippet,
 * and a memory chip. Communicates "guest profile across every channel".
 * =================================================================== */
function CrmHeroVisual() {
  const ChIc = window.channelIcon || {};
  const ChHue = window.channelHue || {};
  return (
    <div className="crmh">
      {/* Top, contact identity strip */}
      <div className="crmh-id">
        <div className="crmh-avatar">AD</div>
        <div className="crmh-id-body">
          <div className="crmh-name">
            Aoife Daly
            <span className="crmh-flag" aria-hidden="true">🇮🇪</span>
            <span className="crmh-pill">VIP</span>
          </div>
          <div className="crmh-id-meta">
            <span><IconMail size={11} stroke={2} /> aoife@…</span>
            <span><IconWhatsApp size={11} stroke={2} /> +353…</span>
            <span><IconLang size={11} stroke={2} /> EN</span>
          </div>
        </div>
        <div className="crmh-status">
          <span className="crmh-status-dot" />
          In-house · Reverence Mare
        </div>
      </div>

      {/* Stats row */}
      <div className="crmh-stats">
        <div className="crmh-stat">
          <div className="crmh-stat-num">7</div>
          <div className="crmh-stat-l">Stays</div>
        </div>
        <div className="crmh-stat">
          <div className="crmh-stat-num">€11.4k</div>
          <div className="crmh-stat-l">LTV</div>
        </div>
        <div className="crmh-stat">
          <div className="crmh-stat-num">4.6</div>
          <div className="crmh-stat-l">Avg nights</div>
        </div>
        <div className="crmh-stat">
          <div className="crmh-stat-num">Gold</div>
          <div className="crmh-stat-l">Tier</div>
        </div>
      </div>

      {/* Conversation snippet, three channels writing back to one record */}
      <div className="crmh-stream">
        <div className="crmh-stream-h">
          <span>Conversations, every channel, one record</span>
          <span className="crmh-stream-count">2,184</span>
        </div>
        {[
          { ch: "whatsapp", who: "Aoife", text: "Bringing my dachshund this time, can he stay?", t: "Tue" },
          { ch: "instagram", who: "Aoife", text: "The rooftop bar at sunset, unreal 🌅", t: "Mon" },
          { ch: "voice", who: "Aoife · call 2:14", text: "Late checkin around 23:30, just FYI.", t: "Sat" },
          { ch: "email", who: "Aoife", text: "Re: Confirmación de Reserva, can I add breakfast?", t: "Fri" },
        ].map((m, i) => {
          const Ic = ChIc[m.ch];
          const hue = ChHue[m.ch];
          return (
            <div key={i} className="crmh-msg">
              <span className="crmh-msg-ch" style={{ color: hue, background: `color-mix(in srgb, ${hue} 14%, transparent)` }}>
                {Ic && <Ic size={11} stroke={2} />}
              </span>
              <span className="crmh-msg-who">{m.who}</span>
              <span className="crmh-msg-text">{m.text}</span>
              <span className="crmh-msg-t">{m.t}</span>
            </div>
          );
        })}
      </div>

      {/* Memory chips, the long-term memory store */}
      <div className="crmh-mem">
        <div className="crmh-mem-h">Memories</div>
        <div className="crmh-mem-row">
          <span className="crmh-mem-chip">vegetarian</span>
          <span className="crmh-mem-chip">dog · 8kg dachshund</span>
          <span className="crmh-mem-chip">firm pillow</span>
          <span className="crmh-mem-chip">anniv. Aug 14</span>
          <span className="crmh-mem-chip muted">+ 11 more</span>
        </div>
      </div>

      <style>{`
        .crmh {
          display: flex; flex-direction: column; gap: 14px;
          min-height: 460px;
          font-family: var(--f-sans);
        }
        .crmh-id {
          display: grid;
          grid-template-columns: 44px 1fr auto;
          gap: 14px; align-items: center;
          padding: 14px 16px;
          background: var(--bg-elev-2);
          border: 1px solid var(--hairline);
          border-radius: 14px;
        }
        .crmh-avatar {
          width: 44px; height: 44px;
          border-radius: 50%;
          display: grid; place-items: center;
          background: linear-gradient(135deg, var(--c-instagram), color-mix(in srgb, var(--c-instagram) 60%, #000));
          color: white; font-weight: 600; font-size: 14px;
          letter-spacing: 0.04em;
        }
        .crmh-name {
          font-size: 16px; font-weight: 500; color: var(--ink);
          display: flex; align-items: center; gap: 8px;
        }
        .crmh-flag { font-size: 13px; }
        .crmh-pill {
          padding: 2px 7px;
          font-family: var(--f-mono); font-size: 10px;
          letter-spacing: 0.06em; text-transform: uppercase;
          background: color-mix(in srgb, var(--accent) 14%, transparent);
          color: var(--accent);
          border-radius: 4px;
        }
        .crmh-id-meta {
          margin-top: 4px;
          display: flex; gap: 14px; flex-wrap: wrap;
          font-size: 12px; color: var(--ink-3);
        }
        .crmh-id-meta span { display: inline-flex; align-items: center; gap: 5px; }
        .crmh-status {
          display: inline-flex; align-items: center; gap: 7px;
          font-family: var(--f-mono); font-size: 10.5px;
          color: #0f9d58;
          padding: 5px 9px;
          background: color-mix(in srgb, #0f9d58 12%, transparent);
          border: 1px solid color-mix(in srgb, #0f9d58 30%, transparent);
          border-radius: 999px;
          white-space: nowrap;
        }
        .crmh-status-dot {
          width: 6px; height: 6px; border-radius: 50%;
          background: #0f9d58;
          box-shadow: 0 0 8px #0f9d58;
        }

        .crmh-stats {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 8px;
        }
        .crmh-stat {
          padding: 14px 14px 12px;
          background: var(--bg-elev-2);
          border: 1px solid var(--hairline);
          border-radius: 12px;
        }
        .crmh-stat-num {
          font-family: var(--f-display);
          font-size: 22px; line-height: 1;
          color: var(--ink); letter-spacing: -0.01em;
          font-weight: 400;
        }
        .crmh-stat-l {
          margin-top: 5px;
          font-family: var(--f-mono); font-size: 10px;
          color: var(--ink-3);
          letter-spacing: 0.06em; text-transform: uppercase;
        }

        .crmh-stream {
          padding: 14px 14px 6px;
          background: var(--bg-elev-2);
          border: 1px solid var(--hairline);
          border-radius: 14px;
          display: flex; flex-direction: column; gap: 6px;
        }
        .crmh-stream-h {
          display: flex; justify-content: space-between; align-items: center;
          font-family: var(--f-mono); font-size: 10.5px;
          color: var(--ink-3);
          letter-spacing: 0.06em; text-transform: uppercase;
          padding-bottom: 6px;
          border-bottom: 1px dashed var(--hairline);
        }
        .crmh-stream-count {
          color: var(--ink-2); font-weight: 500;
        }
        .crmh-msg {
          display: grid;
          grid-template-columns: 22px 70px 1fr auto;
          gap: 10px; align-items: center;
          padding: 7px 0;
          font-size: 12.5px;
        }
        .crmh-msg + .crmh-msg { border-top: 1px solid var(--hairline); }
        .crmh-msg-ch {
          width: 22px; height: 22px;
          display: grid; place-items: center;
          border-radius: 6px;
        }
        .crmh-msg-who {
          font-weight: 500; color: var(--ink);
          font-size: 12px;
          white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .crmh-msg-text {
          color: var(--ink-2);
          white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .crmh-msg-t {
          font-family: var(--f-mono); font-size: 10px;
          color: var(--ink-3);
        }

        .crmh-mem {
          padding: 12px 14px;
          background: color-mix(in srgb, var(--c-instagram) 5%, var(--bg-elev-2));
          border: 1px solid color-mix(in srgb, var(--c-instagram) 22%, transparent);
          border-radius: 14px;
          display: flex; flex-direction: column; gap: 8px;
        }
        .crmh-mem-h {
          font-family: var(--f-mono); font-size: 10.5px;
          color: color-mix(in srgb, var(--c-instagram) 90%, var(--ink));
          letter-spacing: 0.06em; text-transform: uppercase;
        }
        .crmh-mem-row { display: flex; flex-wrap: wrap; gap: 6px; }
        .crmh-mem-chip {
          padding: 5px 10px;
          background: var(--bg-elev-2);
          border: 1px solid var(--hairline);
          border-radius: 999px;
          font-size: 12px; color: var(--ink);
          white-space: nowrap;
        }
        .crmh-mem-chip.muted { color: var(--ink-3); }

        @media (max-width: 600px) {
          .crmh-id { grid-template-columns: 36px 1fr; }
          .crmh-status { grid-column: 1 / -1; align-self: start; }
          .crmh-stats { grid-template-columns: repeat(2, 1fr); }
          .crmh-msg { grid-template-columns: 20px 1fr auto; }
          .crmh-msg-who { display: none; }
        }
      `}</style>
    </div>
  );
}

/* === BROWSER FRAME, wraps real screenshots ============================ */
function BrowserShot({ src, alt, label, height }) {
  return (
    <div className="bshot">
      <div className="bshot-bar">
        <span className="bshot-dot r" />
        <span className="bshot-dot y" />
        <span className="bshot-dot g" />
        <div className="bshot-url">{label}</div>
      </div>
      <div className="bshot-img-wrap" style={height ? { aspectRatio: "auto", height } : null}>
        <img src={src} alt={alt} loading="lazy" />
      </div>
      <style>{`
        .bshot {
          background: var(--bg-elev-2);
          border: 1px solid var(--hairline);
          border-radius: 14px;
          overflow: hidden;
          box-shadow: 0 30px 80px -30px rgba(0,0,0,0.18);
        }
        .bshot-bar {
          display: flex; align-items: center; gap: 6px;
          padding: 10px 14px;
          background: var(--bg-elev-1);
          border-bottom: 1px solid var(--hairline);
        }
        .bshot-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
        .bshot-dot.r { background: #FF5F57; }
        .bshot-dot.y { background: #FEBC2E; }
        .bshot-dot.g { background: #28C840; }
        .bshot-url {
          margin-left: 12px;
          padding: 4px 12px;
          background: var(--bg-elev-2);
          border: 1px solid var(--hairline);
          border-radius: 6px;
          font-family: var(--f-mono); font-size: 11px;
          color: var(--ink-3);
          flex: 1;
          max-width: 380px;
          overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .bshot-img-wrap {
          aspect-ratio: 2 / 1;
          background: #fff;
          overflow: hidden;
          position: relative;
        }
        .bshot-img-wrap img {
          width: 100%; height: 100%;
          object-fit: cover;
          object-position: top center;
          display: block;
        }
      `}</style>
    </div>
  );
}

/* === CONTACT PROFILE TABS, recreates the screenshot interactively ===== */
function ContactProfileTabs() {
  const [tab, setTab] = useState("overview");

  const tabs = [
    { id: "overview", label: "Overview" },
    { id: "reservations", label: "Reservations" },
    { id: "messaging", label: "Messaging" },
    { id: "memory", label: "Memory" },
    { id: "loyalty", label: "Loyalty" },
    { id: "activity", label: "Activity" },
  ];

  return (
    <div className="cpt">
      <div className="cpt-frame">
        <div className="cpt-bar">
          <span className="bshot-dot r" /><span className="bshot-dot y" /><span className="bshot-dot g" />
          <div className="cpt-bar-url">guestmaker.ai · contacts · aoife daly</div>
        </div>

        {/* Header strip */}
        <div className="cpt-head">
          <div className="cpt-avatar">AD</div>
          <div>
            <div className="cpt-name">
              Aoife Daly <span className="cpt-phone">+353 83 199 2901</span>
            </div>
            <div className="cpt-meta">
              <span><IconMail size={11} stroke={2} /> daly.aoife8@gmail.com</span>
              <span><IconBuilding size={11} stroke={2} /> Reverence Mare Hotel</span>
              <span><IconLang size={11} stroke={2} /> EN</span>
              <span><IconPin size={11} stroke={2} /> Dublin</span>
              <span className="cpt-meta-tag">Pre-Stay</span>
              <span className="cpt-meta-active">Active</span>
            </div>
          </div>
          <button className="cpt-edit"><IconPencil size={11} stroke={2} /> Edit</button>
        </div>

        {/* Tabs */}
        <div className="cpt-tabs">
          {tabs.map(t => (
            <button
              key={t.id}
              className={`cpt-tab ${tab === t.id ? "active" : ""}`}
              onClick={() => setTab(t.id)}
            >
              {t.label}
            </button>
          ))}
        </div>

        {/* Body, switches per tab */}
        <div className="cpt-body">
          {tab === "overview" && <CPTOverview />}
          {tab === "reservations" && <CPTReservations />}
          {tab === "messaging" && <CPTMessaging />}
          {tab === "memory" && <CPTMemory />}
          {tab === "loyalty" && <CPTLoyalty />}
          {tab === "activity" && <CPTActivity />}
        </div>
      </div>

      <style>{`
        .cpt-frame {
          background: var(--bg-elev-2);
          border: 1px solid var(--hairline);
          border-radius: 16px;
          overflow: hidden;
          box-shadow: 0 30px 80px -30px rgba(0,0,0,0.2);
        }
        .cpt-bar {
          display: flex; align-items: center; gap: 6px;
          padding: 10px 14px;
          background: var(--bg-elev-1);
          border-bottom: 1px solid var(--hairline);
        }
        .cpt-bar-url {
          margin-left: 12px;
          padding: 4px 12px;
          background: var(--bg-elev-2);
          border: 1px solid var(--hairline);
          border-radius: 6px;
          font-family: var(--f-mono); font-size: 11px;
          color: var(--ink-3);
          flex: 1; max-width: 420px;
          overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .cpt-head {
          display: grid;
          grid-template-columns: 56px 1fr auto;
          gap: 16px; align-items: center;
          padding: 22px 26px;
          border-bottom: 1px solid var(--hairline);
        }
        .cpt-avatar {
          width: 56px; height: 56px;
          border-radius: 50%;
          background: linear-gradient(135deg, var(--c-instagram), color-mix(in srgb, var(--c-instagram) 60%, #000));
          color: white; font-weight: 600; font-size: 18px;
          display: grid; place-items: center;
        }
        .cpt-name {
          font-family: var(--f-display);
          font-size: 28px; font-weight: 400; color: var(--ink);
          letter-spacing: -0.01em;
          display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
        }
        .cpt-phone {
          font-family: var(--f-sans);
          font-size: 13px; color: var(--ink-3); font-weight: 400;
        }
        .cpt-meta {
          margin-top: 8px;
          display: flex; flex-wrap: wrap; gap: 14px;
          font-size: 12.5px; color: var(--ink-3);
        }
        .cpt-meta span { display: inline-flex; align-items: center; gap: 5px; }
        .cpt-meta-tag {
          padding: 2px 8px;
          background: color-mix(in srgb, var(--accent) 12%, transparent);
          color: var(--accent);
          border-radius: 4px;
          font-family: var(--f-mono); font-size: 10.5px;
          letter-spacing: 0.04em;
        }
        .cpt-meta-active {
          padding: 2px 8px;
          background: color-mix(in srgb, #0f9d58 14%, transparent);
          color: #0f9d58;
          border-radius: 4px;
          font-family: var(--f-mono); font-size: 10.5px;
          letter-spacing: 0.04em;
          display: inline-flex; align-items: center; gap: 5px;
        }
        .cpt-meta-active::before {
          content: ""; width: 5px; height: 5px; border-radius: 50%;
          background: #0f9d58; box-shadow: 0 0 6px #0f9d58;
        }
        .cpt-edit {
          padding: 8px 14px;
          background: var(--ink); color: var(--bg);
          border: 1px solid var(--ink);
          border-radius: 8px;
          font-size: 13px; font-weight: 500;
          display: inline-flex; align-items: center; gap: 7px;
          cursor: pointer;
        }

        .cpt-tabs {
          display: flex; gap: 4px;
          padding: 0 26px;
          border-bottom: 1px solid var(--hairline);
          overflow-x: auto;
        }
        .cpt-tab {
          padding: 14px 16px;
          background: none; border: 0;
          font-family: var(--f-sans); font-size: 13.5px;
          color: var(--ink-3);
          cursor: pointer;
          border-bottom: 2px solid transparent;
          margin-bottom: -1px;
          white-space: nowrap;
          transition: color .15s ease;
        }
        .cpt-tab:hover { color: var(--ink-2); }
        .cpt-tab.active {
          color: var(--ink);
          border-bottom-color: var(--accent);
        }

        .cpt-body {
          padding: 24px 26px 28px;
          min-height: 360px;
        }

        @media (max-width: 700px) {
          .cpt-head { grid-template-columns: 44px 1fr; padding: 18px 20px; }
          .cpt-edit { display: none; }
          .cpt-name { font-size: 22px; gap: 8px; }
          .cpt-tabs, .cpt-body { padding-left: 18px; padding-right: 18px; }
        }
      `}</style>
    </div>
  );
}

/* ===== Tab content ===== */

function CPTOverview() {
  const ChIc = window.channelIcon || {};
  return (
    <div className="cpt-grid">
      <div className="cpt-main">
        <div className="cpt-section-h">Upcoming stay <span className="cpt-confirmed">Confirmed</span></div>
        <div className="cpt-stay">
          <div>
            <div className="cpt-stay-k">Dates</div>
            <div className="cpt-stay-v">15 Jul → 18 Jul <span className="cpt-stay-sub">3 nights</span></div>
          </div>
          <div>
            <div className="cpt-stay-k">Room</div>
            <div className="cpt-stay-v">Privilegemar</div>
          </div>
          <div>
            <div className="cpt-stay-k">Property</div>
            <div className="cpt-stay-v">Reverence Mare Hotel <span className="cpt-stay-sub">ROI</span></div>
          </div>
          <div>
            <div className="cpt-stay-k">Total</div>
            <div className="cpt-stay-v cpt-stay-num">€743</div>
          </div>
        </div>

        <div className="cpt-tiles">
          <div className="cpt-tile cpt-tile-a">
            <div className="cpt-tile-icon"><IconStays size={20} stroke={1.6} /></div>
            <div className="cpt-tile-num">7</div>
            <div className="cpt-tile-l">Total stays</div>
          </div>
          <div className="cpt-tile cpt-tile-b">
            <div className="cpt-tile-icon">€</div>
            <div className="cpt-tile-num">€11.4k</div>
            <div className="cpt-tile-l">Lifetime value</div>
          </div>
          <div className="cpt-tile cpt-tile-c">
            <div className="cpt-tile-icon">+</div>
            <div className="cpt-tile-num">€1.2k</div>
            <div className="cpt-tile-l">Extras revenue</div>
          </div>
          <div className="cpt-tile cpt-tile-d">
            <div className="cpt-tile-icon"><IconMoon size={18} stroke={1.6} /></div>
            <div className="cpt-tile-num">€248</div>
            <div className="cpt-tile-l">Avg / night</div>
          </div>
        </div>

        <div className="cpt-section-h" style={{ marginTop: 24 }}>Email engagement</div>
        <div className="cpt-eng">
          <div className="cpt-eng-cell">
            <div className="cpt-eng-k">Total opens</div>
            <div className="cpt-eng-v">42 <span className="cpt-eng-sub">68% open rate</span></div>
          </div>
          <div className="cpt-eng-cell">
            <div className="cpt-eng-k">Total clicks</div>
            <div className="cpt-eng-v">11 <span className="cpt-eng-sub">26% CTR</span></div>
          </div>
          <div className="cpt-eng-cell">
            <div className="cpt-eng-k">Bounces</div>
            <div className="cpt-eng-v">0 <span className="cpt-eng-sub">healthy</span></div>
          </div>
          <div className="cpt-eng-cell">
            <div className="cpt-eng-k">Spam</div>
            <div className="cpt-eng-v">0 <span className="cpt-eng-sub">clean</span></div>
          </div>
        </div>
      </div>

      <aside className="cpt-aside">
        <div className="cpt-aside-h">Recent activity</div>
        {[
          { ic: "✓", text: "Journey completed: Confirmación de Reserva", t: "1h ago", c: "#0f9d58" },
          { ic: "wa", text: "Message sent · Hello Aoife, thank you for choosing Reverence…", t: "1h ago", c: "var(--c-whatsapp)" },
          { ic: "▶", text: "Journey started: Checkin Online Journey", t: "1h ago", c: "var(--accent)" },
          { ic: "▶", text: "Journey started: Confirmación de Reserva", t: "1h ago", c: "var(--accent)" },
          { ic: "↻", text: "Booking updated · 2026-07-15 → 2026-07-18", t: "1h ago", c: "var(--c-instagram)" },
          { ic: "+", text: "Booking created · status: confirmed", t: "1h ago", c: "var(--c-email)" },
          { ic: "✱", text: "Contact created · source: booking_engine", t: "1h ago", c: "var(--c-booking)" },
        ].map((a, i) => (
          <div key={i} className="cpt-act">
            <span className="cpt-act-ic" style={{ color: a.c, background: `color-mix(in srgb, ${a.c} 14%, transparent)` }}>
              {a.ic === "wa" && ChIc.whatsapp ? <ChIc.whatsapp size={11} stroke={2} /> : a.ic}
            </span>
            <div className="cpt-act-body">
              <div className="cpt-act-text">{a.text}</div>
              <div className="cpt-act-t">{a.t}</div>
            </div>
          </div>
        ))}
      </aside>

      <style>{`
        .cpt-grid {
          display: grid;
          grid-template-columns: 1.6fr 1fr;
          gap: 26px;
        }
        @media (max-width: 900px) { .cpt-grid { grid-template-columns: 1fr; } }
        .cpt-section-h {
          font-family: var(--f-mono); font-size: 10.5px;
          color: var(--ink-3);
          letter-spacing: 0.08em; text-transform: uppercase;
          margin-bottom: 12px;
          display: flex; align-items: center; gap: 10px;
        }
        .cpt-confirmed {
          padding: 2px 8px;
          background: color-mix(in srgb, #0f9d58 14%, transparent);
          color: #0f9d58;
          border-radius: 4px;
          font-size: 9.5px; letter-spacing: 0.04em;
        }
        .cpt-stay {
          display: grid;
          grid-template-columns: 1.4fr 1fr 1.4fr 0.8fr;
          gap: 18px;
          padding: 16px 18px 14px;
          background: linear-gradient(90deg,
            color-mix(in srgb, var(--accent) 6%, transparent) 0%,
            color-mix(in srgb, var(--c-email) 6%, transparent) 50%,
            color-mix(in srgb, var(--c-instagram) 6%, transparent) 100%);
          border: 1px solid var(--hairline);
          border-radius: 10px;
          margin-bottom: 18px;
          position: relative;
          overflow: hidden;
        }
        .cpt-stay::before {
          content: "";
          position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
          background: linear-gradient(180deg, #FFC107, var(--accent));
        }
        .cpt-stay-k {
          font-family: var(--f-mono); font-size: 9.5px;
          color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em;
        }
        .cpt-stay-v {
          margin-top: 4px;
          font-size: 13px; color: var(--ink); font-weight: 500;
        }
        .cpt-stay-num {
          font-family: var(--f-display); font-size: 18px;
          font-weight: 400; letter-spacing: -0.01em;
        }
        .cpt-stay-sub { color: var(--ink-3); font-weight: 400; font-size: 11px; }

        .cpt-tiles {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 8px;
        }
        @media (max-width: 700px) { .cpt-tiles { grid-template-columns: repeat(2, 1fr); } }
        .cpt-tile {
          padding: 18px 14px 14px;
          border-radius: 10px;
          display: flex; flex-direction: column; align-items: center; text-align: center;
          gap: 4px;
          border: 1px solid var(--hairline);
        }
        .cpt-tile-a { background: color-mix(in srgb, #FFC107 11%, var(--bg-elev-2)); }
        .cpt-tile-b { background: color-mix(in srgb, #0f9d58 11%, var(--bg-elev-2)); }
        .cpt-tile-c { background: color-mix(in srgb, var(--c-instagram) 9%, var(--bg-elev-2)); }
        .cpt-tile-d { background: color-mix(in srgb, var(--c-email) 11%, var(--bg-elev-2)); }
        .cpt-tile-icon {
          font-size: 18px; color: var(--ink-3);
          height: 24px; display: grid; place-items: center;
          font-weight: 500;
        }
        .cpt-tile-num {
          font-family: var(--f-display);
          font-size: 22px; line-height: 1;
          color: var(--ink); letter-spacing: -0.01em;
          font-weight: 400;
        }
        .cpt-tile-l {
          font-family: var(--f-mono); font-size: 9.5px;
          color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase;
        }

        .cpt-eng {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 1px;
          background: var(--hairline);
          border: 1px solid var(--hairline);
          border-radius: 10px;
          overflow: hidden;
        }
        @media (max-width: 700px) { .cpt-eng { grid-template-columns: repeat(2, 1fr); } }
        .cpt-eng-cell {
          background: var(--bg-elev-2);
          padding: 14px 14px 12px;
        }
        .cpt-eng-k {
          font-family: var(--f-mono); font-size: 9.5px;
          color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em;
        }
        .cpt-eng-v {
          margin-top: 6px;
          font-family: var(--f-display); font-size: 22px;
          color: var(--ink); font-weight: 400; letter-spacing: -0.01em;
          display: flex; align-items: baseline; gap: 8px;
        }
        .cpt-eng-sub {
          font-family: var(--f-sans); font-size: 11px; color: var(--ink-3);
          font-weight: 400;
        }

        .cpt-aside {
          background: var(--bg-elev-1);
          border: 1px solid var(--hairline);
          border-radius: 12px;
          padding: 16px 16px 6px;
        }
        .cpt-aside-h {
          font-family: var(--f-mono); font-size: 10.5px;
          color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase;
          margin-bottom: 10px;
        }
        .cpt-act {
          display: grid;
          grid-template-columns: 22px 1fr;
          gap: 10px; align-items: center;
          padding: 9px 0;
          font-size: 12.5px;
          border-top: 1px solid var(--hairline);
        }
        .cpt-act:first-of-type { border-top: 0; }
        .cpt-act-ic {
          width: 22px; height: 22px;
          display: grid; place-items: center;
          border-radius: 5px;
          font-size: 11px; font-weight: 500;
        }
        .cpt-act-text {
          color: var(--ink);
          line-height: 1.35;
          overflow: hidden; text-overflow: ellipsis;
          display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        }
        .cpt-act-t { font-family: var(--f-mono); font-size: 10px; color: var(--ink-3); margin-top: 2px; }
      `}</style>
    </div>
  );
}

function CPTReservations() {
  const rows = [
    { id: "247887", date: "Jul 15 → 18, 2026", room: "Privilegemar", hotel: "Reverence Mare", status: "Confirmed", source: "Booking.com", amt: "€743" },
    { id: "241531", date: "Apr 02 → 05, 2026", room: "Comfort", hotel: "Reverence Mare", status: "Checked Out", source: "Direct", amt: "€612" },
    { id: "238104", date: "Aug 19 → 24, 2025", room: "Privilegemar", hotel: "Reverence Life", source: "Direct", status: "Checked Out", amt: "€1,840" },
    { id: "224712", date: "May 11 → 13, 2025", room: "Comfort", hotel: "Reverence Mare", status: "Cancelled", source: "Booking.com", amt: "€0" },
    { id: "211008", date: "Aug 22 → 30, 2024", room: "Premium Vista", hotel: "Reverence Life", status: "Checked Out", source: "Direct", amt: "€2,610" },
  ];
  return (
    <div className="cpt-rsv">
      <div className="cpt-rsv-h">
        <span className="cpt-rsv-h-l">7 reservations · 2 properties · €11,403 lifetime</span>
        <div className="cpt-rsv-filters">
          <span className="cpt-chip active">All</span>
          <span className="cpt-chip">Past</span>
          <span className="cpt-chip">Upcoming</span>
          <span className="cpt-chip">Cancelled</span>
        </div>
      </div>
      <div className="cpt-rsv-table">
        <div className="cpt-rsv-row cpt-rsv-head">
          <span>Confirmation #</span><span>Dates</span><span>Hotel · Room</span><span>Status</span><span>Source</span><span>Amount</span>
        </div>
        {rows.map((r, i) => (
          <div key={i} className="cpt-rsv-row">
            <span className="cpt-rsv-id">{r.id}</span>
            <span>{r.date}</span>
            <span>{r.hotel} · <span style={{ color: "var(--ink-3)" }}>{r.room}</span></span>
            <span><span className={`cpt-rsv-st cpt-rsv-st-${r.status.toLowerCase().replace(/\s+/g, "-")}`}>{r.status}</span></span>
            <span className="cpt-rsv-src">{r.source}</span>
            <span className="cpt-rsv-amt">{r.amt}</span>
          </div>
        ))}
      </div>
      <style>{`
        .cpt-rsv-h {
          display: flex; justify-content: space-between; align-items: center;
          margin-bottom: 14px;
          flex-wrap: wrap; gap: 12px;
        }
        .cpt-rsv-h-l {
          font-family: var(--f-mono); font-size: 11px;
          color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase;
        }
        .cpt-rsv-filters { display: flex; gap: 6px; flex-wrap: wrap; }
        .cpt-chip {
          padding: 4px 10px;
          font-family: var(--f-mono); font-size: 10.5px;
          color: var(--ink-3);
          background: var(--bg-elev-1);
          border: 1px solid var(--hairline);
          border-radius: 999px;
          letter-spacing: 0.04em;
        }
        .cpt-chip.active {
          background: var(--ink); color: var(--bg);
          border-color: var(--ink);
        }
        .cpt-rsv-table {
          border: 1px solid var(--hairline);
          border-radius: 10px;
          overflow: hidden;
          font-size: 13px;
        }
        .cpt-rsv-row {
          display: grid;
          grid-template-columns: 100px 1.4fr 1.4fr 1fr 1fr 0.8fr;
          gap: 14px;
          padding: 12px 16px;
          align-items: center;
        }
        .cpt-rsv-row + .cpt-rsv-row { border-top: 1px solid var(--hairline); }
        .cpt-rsv-head {
          background: var(--bg-elev-1);
          font-family: var(--f-mono); font-size: 10.5px;
          color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em;
        }
        .cpt-rsv-id {
          font-family: var(--f-mono);
          color: var(--c-instagram);
          font-weight: 500;
        }
        .cpt-rsv-st {
          padding: 3px 8px;
          background: var(--ink); color: var(--bg);
          border-radius: 4px;
          font-family: var(--f-mono); font-size: 10px;
          letter-spacing: 0.04em;
        }
        .cpt-rsv-st-cancelled {
          background: var(--bg-elev-1); color: var(--ink-3);
          border: 1px solid var(--hairline);
        }
        .cpt-rsv-st-confirmed {
          background: color-mix(in srgb, #0f9d58 18%, transparent);
          color: #0f9d58;
        }
        .cpt-rsv-src {
          font-family: var(--f-mono); font-size: 11px;
          color: var(--ink-3);
        }
        .cpt-rsv-amt {
          font-weight: 500; color: var(--ink);
          text-align: right;
        }
        @media (max-width: 800px) {
          .cpt-rsv-row { grid-template-columns: 1fr; gap: 4px; padding: 14px 16px; }
          .cpt-rsv-head { display: none; }
          .cpt-rsv-row + .cpt-rsv-row { border-top: 1px solid var(--hairline); }
          .cpt-rsv-amt { text-align: left; }
        }
      `}</style>
    </div>
  );
}

function CPTMessaging() {
  const ChIc = window.channelIcon || {};
  const ChHue = window.channelHue || {};
  const msgs = [
    { ch: "whatsapp", who: "Aoife", text: "Hi! Bringing my dachshund this time, can he stay?", t: "Tue 14:02", side: "in" },
    { ch: "whatsapp", who: "Reverence · AI", text: "Hi Aoife! Yes, dogs up to 8kg are very welcome at €15/night. Anything you'd like us to prepare?", t: "Tue 14:02", side: "out", ai: true },
    { ch: "whatsapp", who: "Aoife", text: "Amazing. A water bowl and a small bed if possible 🐶", t: "Tue 14:04", side: "in" },
    { ch: "instagram", who: "Aoife", text: "The rooftop bar at sunset, unreal 🌅", t: "Mon 21:18", side: "in" },
    { ch: "voice", who: "Aoife (call · 2:14)", text: "Late checkin around 23:30, just a heads up. AI handed off to night manager.", t: "Sat 18:42", side: "in" },
    { ch: "email", who: "Aoife", text: "Re: Confirmación de Reserva, can I add breakfast for the second night?", t: "Fri 09:11", side: "in" },
  ];
  return (
    <div className="cpt-msg">
      <div className="cpt-msg-h">
        <span className="cpt-rsv-h-l">2,184 messages across 6 channels · all merged into one thread</span>
        <div className="cpt-rsv-filters">
          {["whatsapp","instagram","email","voice","booking"].map(ch => {
            const Ic = ChIc[ch];
            const hue = ChHue[ch];
            return (
              <span key={ch} className="cpt-msg-chip" style={{ color: hue, borderColor: `color-mix(in srgb, ${hue} 30%, transparent)` }}>
                {Ic && <Ic size={11} stroke={2} />} {ch}
              </span>
            );
          })}
        </div>
      </div>
      {msgs.map((m, i) => {
        const Ic = ChIc[m.ch];
        const hue = ChHue[m.ch];
        return (
          <div key={i} className={`cpt-msg-row ${m.side}`}>
            <span className="cpt-msg-ch" style={{ color: hue, background: `color-mix(in srgb, ${hue} 14%, transparent)` }}>
              {Ic && <Ic size={11} stroke={2} />}
            </span>
            <div className="cpt-msg-body">
              <div className="cpt-msg-meta">
                <span className="cpt-msg-who">{m.who}</span>
                {m.ai && <span className="cpt-msg-ai">AI</span>}
                <span className="cpt-msg-t">{m.t}</span>
              </div>
              <div className="cpt-msg-bubble">{m.text}</div>
            </div>
          </div>
        );
      })}
      <style>{`
        .cpt-msg { display: flex; flex-direction: column; gap: 14px; }
        .cpt-msg-h {
          display: flex; justify-content: space-between; align-items: center;
          flex-wrap: wrap; gap: 10px;
          padding-bottom: 12px;
          border-bottom: 1px dashed var(--hairline);
        }
        .cpt-msg-chip {
          display: inline-flex; align-items: center; gap: 5px;
          padding: 4px 9px;
          font-family: var(--f-mono); font-size: 10px;
          background: var(--bg-elev-1);
          border: 1px solid;
          border-radius: 999px;
          letter-spacing: 0.04em;
        }
        .cpt-msg-row {
          display: grid;
          grid-template-columns: 24px 1fr;
          gap: 12px; align-items: flex-start;
        }
        .cpt-msg-ch {
          width: 24px; height: 24px;
          display: grid; place-items: center;
          border-radius: 6px;
          margin-top: 2px;
        }
        .cpt-msg-meta {
          display: flex; align-items: center; gap: 8px;
          font-family: var(--f-mono); font-size: 10.5px;
          color: var(--ink-3);
          margin-bottom: 4px;
        }
        .cpt-msg-who { font-family: var(--f-sans); color: var(--ink-2); font-weight: 500; font-size: 12px; }
        .cpt-msg-ai {
          padding: 1px 6px;
          background: var(--accent); color: white;
          font-size: 9px; letter-spacing: 0.06em; font-weight: 600;
          border-radius: 3px;
        }
        .cpt-msg-bubble {
          padding: 10px 14px;
          background: var(--bg-elev-1);
          border: 1px solid var(--hairline);
          border-radius: 10px;
          font-size: 13.5px; line-height: 1.5;
          color: var(--ink);
        }
        .cpt-msg-row.out .cpt-msg-bubble {
          background: color-mix(in srgb, var(--accent) 8%, var(--bg-elev-1));
          border-color: color-mix(in srgb, var(--accent) 22%, transparent);
        }
      `}</style>
    </div>
  );
}

function CPTMemory() {
  const groups = [
    { label: "Stay preferences", items: [{ k: "Pillow", v: "Firm" }, { k: "Floor", v: "High floor, sea view" }, { k: "Quiet room", v: "Yes, requested twice" }] },
    { label: "Dietary", items: [{ k: "Diet", v: "Vegetarian" }, { k: "Allergies", v: "Sesame (mild)" }] },
    { label: "Family", items: [{ k: "Spouse", v: "Tom (3 stays together)" }, { k: "Pet", v: "Frankie · dachshund · 8kg" }] },
    { label: "Special dates", items: [{ k: "Anniversary", v: "Aug 14" }, { k: "Tom's birthday", v: "Mar 22" }] },
    { label: "Travel pattern", items: [{ k: "Visits", v: "3× per year, summer + winter" }, { k: "Avg LOS", v: "4.6 nights" }] },
    { label: "Sentiment", items: [{ k: "Last stay NPS", v: "10 / 10" }, { k: "Notes", v: "Loved rooftop, asked about returning in October" }] },
  ];
  return (
    <div className="cpt-mem">
      <div className="cpt-rsv-h-l" style={{ marginBottom: 14 }}>
        47 memories · captured automatically from conversations and stays · used by every AI agent
      </div>
      <div className="cpt-mem-grid">
        {groups.map((g, i) => (
          <div key={i} className="cpt-mem-card">
            <div className="cpt-mem-card-h">{g.label}</div>
            {g.items.map((it, j) => (
              <div key={j} className="cpt-mem-item">
                <span className="cpt-mem-k">{it.k}</span>
                <span className="cpt-mem-v">{it.v}</span>
              </div>
            ))}
          </div>
        ))}
      </div>
      <style>{`
        .cpt-mem-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 10px;
        }
        @media (max-width: 800px) { .cpt-mem-grid { grid-template-columns: 1fr; } }
        .cpt-mem-card {
          padding: 14px 16px 10px;
          background: var(--bg-elev-1);
          border: 1px solid var(--hairline);
          border-radius: 10px;
        }
        .cpt-mem-card-h {
          font-family: var(--f-mono); font-size: 10.5px;
          color: var(--accent);
          text-transform: uppercase; letter-spacing: 0.08em;
          margin-bottom: 10px;
        }
        .cpt-mem-item {
          display: flex; justify-content: space-between; gap: 14px;
          padding: 6px 0;
          font-size: 12.5px;
          border-top: 1px solid var(--hairline);
        }
        .cpt-mem-item:first-of-type { border-top: 0; }
        .cpt-mem-k { color: var(--ink-3); }
        .cpt-mem-v { color: var(--ink); font-weight: 500; text-align: right; }
      `}</style>
    </div>
  );
}

function CPTLoyalty() {
  return (
    <div>
      <div className="cpt-loy-head">
        <div>
          <div className="cpt-rsv-h-l">Current tier</div>
          <div className="cpt-loy-tier">Gold <span className="cpt-loy-since">since Aug 2024</span></div>
        </div>
        <div className="cpt-loy-progress">
          <div className="cpt-loy-bar"><div className="cpt-loy-bar-fill" style={{ width: "72%" }} /></div>
          <div className="cpt-loy-bar-l">2,140 / 3,000 pts to Platinum</div>
        </div>
      </div>
      <div className="cpt-loy-grid">
        <div className="cpt-loy-cell"><div className="cpt-mem-card-h">Points balance</div><div className="cpt-tile-num">2,140</div></div>
        <div className="cpt-loy-cell"><div className="cpt-mem-card-h">Earned this year</div><div className="cpt-tile-num">1,180</div></div>
        <div className="cpt-loy-cell"><div className="cpt-mem-card-h">Redeemed</div><div className="cpt-tile-num">340</div></div>
        <div className="cpt-loy-cell"><div className="cpt-mem-card-h">Expiring 90d</div><div className="cpt-tile-num">120</div></div>
      </div>
      <div className="cpt-rsv-h-l" style={{ marginTop: 22, marginBottom: 10 }}>Active benefits</div>
      <div className="cpt-loy-bens">
        {["Late check-out (2pm)","Welcome bottle","2× points on direct bookings","Room upgrade (subject to availability)","Priority WhatsApp line"].map((b, i) => (
          <span key={i} className="cpt-mem-chip">{b}</span>
        ))}
      </div>
      <style>{`
        .cpt-loy-head {
          display: grid;
          grid-template-columns: auto 1fr;
          gap: 32px; align-items: center;
          padding: 22px;
          background: linear-gradient(135deg, color-mix(in srgb, #FFC107 12%, var(--bg-elev-1)), var(--bg-elev-1));
          border: 1px solid color-mix(in srgb, #FFC107 22%, var(--hairline));
          border-radius: 12px;
          margin-bottom: 18px;
        }
        @media (max-width: 700px) { .cpt-loy-head { grid-template-columns: 1fr; gap: 18px; } }
        .cpt-loy-tier {
          font-family: var(--f-display);
          font-size: 32px; font-weight: 400; color: var(--ink);
          letter-spacing: -0.01em;
          margin-top: 4px;
          display: flex; align-items: baseline; gap: 10px;
        }
        .cpt-loy-since { font-family: var(--f-sans); font-size: 12px; color: var(--ink-3); font-weight: 400; }
        .cpt-loy-bar {
          height: 8px;
          background: var(--bg-elev-3);
          border-radius: 4px;
          overflow: hidden;
        }
        .cpt-loy-bar-fill {
          height: 100%;
          background: linear-gradient(90deg, #FFC107, #FF8A4C);
          border-radius: 4px;
        }
        .cpt-loy-bar-l {
          margin-top: 8px;
          font-family: var(--f-mono); font-size: 11px;
          color: var(--ink-3);
        }
        .cpt-loy-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 8px;
        }
        @media (max-width: 700px) { .cpt-loy-grid { grid-template-columns: repeat(2, 1fr); } }
        .cpt-loy-cell {
          padding: 14px;
          background: var(--bg-elev-1);
          border: 1px solid var(--hairline);
          border-radius: 10px;
        }
        .cpt-loy-bens { display: flex; flex-wrap: wrap; gap: 8px; }
      `}</style>
    </div>
  );
}

function CPTActivity() {
  const events = [
    { t: "1h ago", k: "journey", text: "Journey completed: Confirmación de Reserva", c: "#0f9d58" },
    { t: "1h ago", k: "msg", text: "Message sent · WhatsApp · template: pre_arrival_v3", c: "var(--c-whatsapp)" },
    { t: "1h ago", k: "journey", text: "Journey started: Check-in Online", c: "var(--accent)" },
    { t: "2h ago", k: "rsv", text: "Booking updated · 2026-07-15 → 2026-07-18 · status: confirmed", c: "var(--c-instagram)" },
    { t: "3h ago", k: "rsv", text: "Booking created · #247887 · source: booking_engine", c: "var(--c-email)" },
    { t: "yesterday", k: "tag", text: "Tag added: returning-guest (auto, by AI Concierge)", c: "var(--c-booking)" },
    { t: "yesterday", k: "memory", text: "Memory captured: dachshund · 8kg · from WhatsApp", c: "var(--c-instagram)" },
    { t: "2d ago", k: "seg", text: "Added to segment: Pre-stay 7 days · DE-speaking", c: "var(--accent)" },
    { t: "2d ago", k: "msg", text: "Voice call · 2:14 · summary: late check-in confirmed", c: "var(--c-voice)" },
    { t: "5d ago", k: "campaign", text: "Campaign delivered: Summer rooftop offer · opened, clicked", c: "var(--c-email)" },
  ];
  return (
    <div>
      <div className="cpt-rsv-h-l" style={{ marginBottom: 14 }}>
        Full audit timeline · interleaved across reservations, messages, journeys, and profile changes
      </div>
      <div className="cpt-act-line">
        {events.map((e, i) => (
          <div key={i} className="cpt-act-event">
            <span className="cpt-act-line-dot" style={{ background: e.c }} />
            <div className="cpt-act-line-body">
              <div className="cpt-act-line-text">{e.text}</div>
              <div className="cpt-act-line-t">{e.t}</div>
            </div>
          </div>
        ))}
      </div>
      <style>{`
        .cpt-act-line {
          position: relative;
          padding-left: 18px;
        }
        .cpt-act-line::before {
          content: "";
          position: absolute; left: 5px; top: 6px; bottom: 6px;
          width: 1px; background: var(--hairline);
        }
        .cpt-act-event {
          display: grid;
          grid-template-columns: 1fr;
          padding: 10px 0;
          position: relative;
          border-top: 1px solid var(--hairline);
        }
        .cpt-act-event:first-of-type { border-top: 0; }
        .cpt-act-line-dot {
          position: absolute; left: -16px; top: 14px;
          width: 9px; height: 9px; border-radius: 50%;
          box-shadow: 0 0 0 3px var(--bg-elev-2);
        }
        .cpt-act-line-text { font-size: 13px; color: var(--ink); }
        .cpt-act-line-t {
          font-family: var(--f-mono); font-size: 10.5px;
          color: var(--ink-3); margin-top: 3px;
        }
      `}</style>
    </div>
  );
}

window.CrmHeroVisual = CrmHeroVisual;
window.BrowserShot = BrowserShot;
window.ContactProfileTabs = ContactProfileTabs;