/* ============================================================
 * CRM "Agentic AI" — the centerpiece section.
 *
 * Dark, hero-grade. Three movements:
 *   1. Headline + live cron ticker subline
 *   2. Profile-in-flight: a contact record that visibly
 *      enriches itself in real time. Chat → memory extraction
 *      → tags → lifecycle → predictions, all wired together.
 *   3. The 8 agent capabilities, typographic grid.
 *   4. Continuous AI crons ticker.
 *
 * Everything animates on a shared 18s loop. No emojis.
 * No screenshots. Pure CRM artifact composed in code.
 * ============================================================ */

const { useState: useStateAG, useEffect: useEffectAG, useRef: useRefAG, useMemo: useMemoAG } = React;

/* --------------------------------------------------------------
 * 1. PROFILE-IN-FLIGHT visual.
 *    A contact record auto-enriching itself, driven by a single
 *    timeline that ticks across messages, then memory cards
 *    appear, tags appear, lifecycle flips, predictions compute.
 * ------------------------------------------------------------ */

function CrmAgentLiveProfile() {
  // The chat that drives the enrichment, on the left.
  const messages = [
    { role: "guest", t: "21:14", ch: "WhatsApp", text: "Hi, we're coming back for our anniversary, third year in a row 🌿" },
    { role: "guest", t: "21:15", ch: "WhatsApp", text: "Same as last time if you can, twin beds for my mum, and Frankie our dachshund will travel with us." },
    { role: "guest", t: "21:16", ch: "WhatsApp", text: "Oh, my partner is now vegetarian, please flag the kitchen 🙏" },
  ];

  // Each timeline step pushes things into the right column.
  // Steps share a single linear time so the user can read causality.
  const TIMELINE = [
    // 0–6s: chat lands
    { at: 0.6,  type: "msg",     idx: 0 },
    { at: 1.8,  type: "msg",     idx: 1 },
    { at: 3.0,  type: "msg",     idx: 2 },

    // 4s onward: enrichment
    { at: 4.0,  type: "field",   k: "country",      v: "Ireland",       src: "phone prefix +353" },
    { at: 4.4,  type: "field",   k: "languages",    v: "EN · primary",  src: "conversation" },
    { at: 4.8,  type: "field",   k: "archetype",    v: "Couple, returning",  src: "stay pattern" },
    { at: 5.2,  type: "field",   k: "channel pref", v: "WhatsApp",      src: "response rate" },

    // 6s: memories extract
    { at: 6.0,  type: "memory",  cat: "Special date",     v: "Anniversary · annual",     conf: 0.94 },
    { at: 6.5,  type: "memory",  cat: "Family",           v: "Travelling with mother",   conf: 0.91 },
    { at: 7.0,  type: "memory",  cat: "Pet",              v: "Dachshund · Frankie",      conf: 0.97 },
    { at: 7.5,  type: "memory",  cat: "Stay preference",  v: "Twin beds for second guest", conf: 0.92 },
    { at: 8.0,  type: "memory",  cat: "Dietary",          v: "Partner vegetarian (new)", conf: 0.95 },

    // 9s: tags
    { at: 9.0,  type: "tag",     v: "VIP" },
    { at: 9.3,  type: "tag",     v: "repeat-returner" },
    { at: 9.6,  type: "tag",     v: "high-LTV" },
    { at: 9.9,  type: "tag",     v: "EN-speaker" },

    // 10s: lifecycle flip
    { at: 10.5, type: "stage",   v: "Returning · pre-stay" },

    // 11s: predictions compute
    { at: 11.0, type: "predict", k: "Predicted next-stay", v: "Oct 2027 · ±3 weeks" },
    { at: 11.4, type: "predict", k: "Predicted LTV",       v: "€8,420" },
    { at: 11.8, type: "predict", k: "Churn probability",   v: "4%" },
    { at: 12.2, type: "predict", k: "Best channel · now",  v: "WhatsApp · EN" },

    // 13s: concierge synthesizes
    { at: 13.5, type: "concierge" },
  ];
  const LOOP = 18; // seconds

  const [now, setNow] = useStateAG(0);
  useEffectAG(() => {
    let raf, start = null;
    const tick = (t) => {
      if (start === null) start = t;
      const elapsed = ((t - start) / 1000) % LOOP;
      setNow(elapsed);
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);

  const visible = (at) => now >= at;

  // Filter chat messages
  const visibleMsgs = messages.filter((_, i) =>
    TIMELINE.find(s => s.type === "msg" && s.idx === i && now >= s.at)
  );

  const visibleFields    = TIMELINE.filter(s => s.type === "field"    && visible(s.at));
  const visibleMemories  = TIMELINE.filter(s => s.type === "memory"   && visible(s.at));
  const visibleTags      = TIMELINE.filter(s => s.type === "tag"      && visible(s.at));
  const stageStep        = TIMELINE.find(s => s.type === "stage" && visible(s.at));
  const visiblePredicts  = TIMELINE.filter(s => s.type === "predict"  && visible(s.at));
  const conciergeOn      = !!TIMELINE.find(s => s.type === "concierge" && visible(s.at));

  return (
    <div className="agp-frame">
      {/* Header bar */}
      <div className="agp-bar">
        <div className="agp-bar-l">
          <div className="agp-id">
            <div className="agp-avatar">AF</div>
            <div className="agp-id-info">
              <div className="agp-id-name">Aoife Flynn</div>
              <div className="agp-id-sub">contact #18441 · since 2024</div>
            </div>
          </div>
        </div>
        <div className="agp-bar-r">
          <div className="agp-status-dot" />
          <span>Agents working</span>
        </div>
      </div>

      <div className="agp-grid">
        {/* LEFT: source — the chat that's driving enrichment */}
        <div className="agp-col agp-source">
          <div className="agp-col-h">
            <span>Source · WhatsApp · EN</span>
            <span className="agp-col-h-sub">today, 21:14</span>
          </div>

          <div className="agp-chat">
            {messages.map((m, i) => {
              const shown = visibleMsgs.includes(m);
              return (
                <div key={i} className={`agp-msg${shown ? " is-in" : ""}`}>
                  <div className="agp-msg-meta">
                    <span>{m.t}</span>
                    <span className="agp-msg-ch">{m.ch}</span>
                  </div>
                  <div className="agp-msg-bubble">{m.text}</div>
                </div>
              );
            })}

            {/* extraction beam */}
            <div className={`agp-extract${visibleMsgs.length === messages.length ? " is-firing" : ""}`}>
              <span className="agp-extract-l" />
              <span className="agp-extract-t">Memory extraction</span>
              <span className="agp-extract-r" />
            </div>
          </div>
        </div>

        {/* CENTER: the record being built */}
        <div className="agp-col agp-record">
          <div className="agp-col-h">
            <span>Contact record</span>
            <span className="agp-col-h-sub">auto-maintained</span>
          </div>

          {/* lifecycle stage badge */}
          <div className={`agp-stage${stageStep ? " is-set" : ""}`}>
            <span className="agp-stage-k">Lifecycle stage</span>
            <span className="agp-stage-v">
              {stageStep ? stageStep.v : <span className="agp-stage-thinking">inferring…</span>}
            </span>
          </div>

          {/* enriched fields */}
          <div className="agp-fields">
            {[
              "country", "languages", "archetype", "channel pref",
            ].map((k, i) => {
              const f = visibleFields.find(x => x.k === k);
              return (
                <div key={k} className={`agp-field${f ? " is-set" : ""}`}>
                  <div className="agp-field-k">{k}</div>
                  <div className="agp-field-v">
                    {f ? f.v : <span className="agp-field-pending">pending…</span>}
                  </div>
                  <div className="agp-field-src">{f ? `inferred · ${f.src}` : ""}</div>
                </div>
              );
            })}
          </div>

          {/* memories — the showcase */}
          <div className="agp-section-h">
            <span>Memories extracted</span>
            <span className="agp-section-count">{visibleMemories.length} / 5</span>
          </div>
          <div className="agp-mems">
            {visibleMemories.map((m, i) => (
              <div key={i} className="agp-mem">
                <div className="agp-mem-cat">{m.cat}</div>
                <div className="agp-mem-v">{m.v}</div>
                <div className="agp-mem-conf">
                  <span className="agp-mem-bar">
                    <span className="agp-mem-fill" style={{ width: `${Math.round(m.conf * 100)}%` }} />
                  </span>
                  <span>{Math.round(m.conf * 100)}%</span>
                </div>
              </div>
            ))}
            {/* placeholder slots */}
            {Array.from({ length: Math.max(0, 5 - visibleMemories.length) }).map((_, i) => (
              <div key={`p${i}`} className="agp-mem agp-mem-empty">
                <div className="agp-mem-cat">…</div>
                <div className="agp-mem-v">extracting</div>
                <div className="agp-mem-conf"><span className="agp-mem-bar"><span className="agp-mem-fill" style={{ width: 0 }} /></span></div>
              </div>
            ))}
          </div>

          {/* tags */}
          <div className="agp-section-h">
            <span>Tags applied</span>
            <span className="agp-section-count">auto</span>
          </div>
          <div className="agp-tags">
            {visibleTags.map((t, i) => (
              <span key={i} className="agp-tag">{t.v}</span>
            ))}
            {visibleTags.length === 0 && <span className="agp-tag agp-tag-empty">computing…</span>}
          </div>
        </div>

        {/* RIGHT: predictions + concierge synthesis */}
        <div className="agp-col agp-out">
          <div className="agp-col-h">
            <span>Predictions</span>
            <span className="agp-col-h-sub">refreshed live</span>
          </div>

          <div className="agp-predicts">
            {[
              "Predicted next-stay", "Predicted LTV", "Churn probability", "Best channel · now",
            ].map((k, i) => {
              const p = visiblePredicts.find(x => x.k === k);
              return (
                <div key={k} className={`agp-pred${p ? " is-set" : ""}`}>
                  <div className="agp-pred-k">{k}</div>
                  <div className="agp-pred-v">
                    {p ? p.v : <span className="agp-pred-thinking">computing…</span>}
                  </div>
                </div>
              );
            })}
          </div>

          <div className={`agp-concierge${conciergeOn ? " is-on" : ""}`}>
            <div className="agp-concierge-h">
              <span className="agp-concierge-tag">AI Concierge · synthesis</span>
              <span className="agp-concierge-pulse" />
            </div>
            <div className="agp-concierge-body">
              {conciergeOn ? (
                <>
                  Aoife is a returning Irish guest celebrating her <em>third</em> anniversary at Reverence,
                  travelling with her partner, her mother, and Frankie the dachshund. Confirm twin beds for
                  the second room and flag the kitchen, the partner is now vegetarian. WhatsApp in EN
                  is her preferred channel; expected next stay window opens around October 2027.
                </>
              ) : (
                <span className="agp-concierge-pending">writing summary…</span>
              )}
            </div>
            {conciergeOn && (
              <div className="agp-concierge-actions">
                <span className="agp-concierge-action">Send pre-stay note</span>
                <span className="agp-concierge-action">Flag kitchen</span>
                <span className="agp-concierge-action">Open profile</span>
              </div>
            )}
          </div>
        </div>
      </div>

      <style>{`
        .agp-frame {
          background: linear-gradient(180deg, #0f0c14 0%, #15101c 100%);
          border: 1px solid rgba(255, 255, 255, 0.06);
          border-radius: 20px;
          padding: 18px 18px 18px;
          color: #f3eef7;
          box-shadow:
            0 1px 0 rgba(255,255,255,0.04) inset,
            0 30px 80px -30px rgba(0,0,0,0.5);
          --agp-pink: #f4a3c4;
          --agp-pink-2: #e58cb3;
          --agp-line: rgba(255,255,255,0.07);
          --agp-line-2: rgba(255,255,255,0.12);
          --agp-mute: rgba(243, 238, 247, 0.55);
          --agp-mute-2: rgba(243, 238, 247, 0.4);
        }
        .agp-bar {
          display: flex; justify-content: space-between; align-items: center;
          padding: 4px 8px 14px;
          border-bottom: 1px solid var(--agp-line);
          margin-bottom: 14px;
        }
        .agp-id { display: flex; align-items: center; gap: 12px; }
        .agp-avatar {
          width: 36px; height: 36px; border-radius: 50%;
          background: linear-gradient(135deg, var(--agp-pink), var(--agp-pink-2));
          color: #1a0e1a; font-weight: 600; font-size: 13px;
          display: grid; place-items: center;
          letter-spacing: 0.04em;
        }
        .agp-id-name {
          font-family: var(--f-display); font-size: 16px;
          color: #fff; font-weight: 400;
          letter-spacing: -0.01em;
        }
        .agp-id-sub {
          font-family: var(--f-mono); font-size: 10.5px;
          color: var(--agp-mute);
        }
        .agp-bar-r {
          display: inline-flex; align-items: center; gap: 8px;
          font-family: var(--f-mono); font-size: 10.5px;
          color: var(--agp-mute);
          letter-spacing: 0.06em; text-transform: uppercase;
        }
        .agp-status-dot {
          width: 7px; height: 7px; border-radius: 50%;
          background: #5fd58e;
          box-shadow: 0 0 0 0 rgba(95, 213, 142, 0.7);
          animation: agp-pulse 2s infinite;
        }
        @keyframes agp-pulse {
          0% { box-shadow: 0 0 0 0 rgba(95, 213, 142, 0.6); }
          70% { box-shadow: 0 0 0 8px rgba(95, 213, 142, 0); }
          100% { box-shadow: 0 0 0 0 rgba(95, 213, 142, 0); }
        }

        .agp-grid {
          display: grid;
          grid-template-columns: 1fr 1.25fr 1fr;
          gap: 14px;
        }
        @media (max-width: 1100px) {
          .agp-grid { grid-template-columns: 1fr; gap: 14px; }
        }
        .agp-col {
          background: rgba(255, 255, 255, 0.025);
          border: 1px solid var(--agp-line);
          border-radius: 14px;
          padding: 14px 14px 14px;
          display: flex; flex-direction: column; gap: 10px;
        }
        .agp-col-h {
          display: flex; justify-content: space-between; align-items: baseline;
          padding-bottom: 10px;
          border-bottom: 1px solid var(--agp-line);
          font-family: var(--f-mono); font-size: 10.5px;
          color: rgba(243, 238, 247, 0.85);
          letter-spacing: 0.07em; text-transform: uppercase;
          margin-bottom: 4px;
        }
        .agp-col-h-sub { color: var(--agp-mute-2); }

        /* CHAT */
        .agp-chat { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 320px; position: relative; }
        .agp-msg {
          opacity: 0; transform: translateY(6px);
          transition: opacity .45s ease, transform .45s ease;
        }
        .agp-msg.is-in { opacity: 1; transform: none; }
        .agp-msg-meta {
          display: flex; gap: 10px; align-items: baseline;
          font-family: var(--f-mono); font-size: 10px;
          color: var(--agp-mute);
          letter-spacing: 0.05em;
          margin-bottom: 4px;
        }
        .agp-msg-ch { color: var(--c-whatsapp); }
        .agp-msg-bubble {
          padding: 10px 12px;
          background: rgba(37, 211, 102, 0.08);
          border: 1px solid rgba(37, 211, 102, 0.18);
          border-radius: 10px 10px 10px 2px;
          font-size: 13px; line-height: 1.45;
          color: #e8e2ee;
          max-width: 92%;
        }

        .agp-extract {
          margin-top: auto;
          padding-top: 18px;
          display: grid;
          grid-template-columns: 1fr auto 1fr;
          gap: 10px;
          align-items: center;
          opacity: 0.4;
          transition: opacity .4s ease;
        }
        .agp-extract.is-firing { opacity: 1; }
        .agp-extract-l, .agp-extract-r {
          height: 1px; background: linear-gradient(90deg, transparent, var(--agp-pink) 50%, transparent);
        }
        .agp-extract-t {
          font-family: var(--f-mono); font-size: 10px;
          color: var(--agp-pink);
          letter-spacing: 0.08em; text-transform: uppercase;
        }
        .agp-extract.is-firing .agp-extract-l,
        .agp-extract.is-firing .agp-extract-r {
          background-size: 200% 100%;
          animation: agp-flow 1.6s linear infinite;
        }
        @keyframes agp-flow {
          0% { background-position: 100% 0%; }
          100% { background-position: -100% 0%; }
        }

        /* RECORD COLUMN */
        .agp-stage {
          display: flex; align-items: center; justify-content: space-between;
          gap: 12px;
          padding: 12px 14px;
          background: rgba(244, 163, 196, 0.04);
          border: 1px solid rgba(244, 163, 196, 0.18);
          border-radius: 10px;
          transition: background .35s ease, border-color .35s ease;
        }
        .agp-stage.is-set {
          background: rgba(244, 163, 196, 0.1);
          border-color: rgba(244, 163, 196, 0.4);
        }
        .agp-stage-k {
          font-family: var(--f-mono); font-size: 10.5px;
          color: var(--agp-mute);
          letter-spacing: 0.07em; text-transform: uppercase;
        }
        .agp-stage-v {
          font-family: var(--f-display); font-size: 16px;
          color: #fff; font-weight: 400;
          letter-spacing: -0.01em;
        }
        .agp-stage-thinking { color: var(--agp-mute-2); font-style: italic; font-weight: 400; }

        .agp-fields {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 1px;
          background: var(--agp-line);
          border-radius: 8px;
          overflow: hidden;
        }
        .agp-field {
          padding: 10px 12px;
          background: rgba(255, 255, 255, 0.02);
          transition: background .35s ease;
        }
        .agp-field.is-set { background: rgba(244, 163, 196, 0.04); }
        .agp-field-k {
          font-family: var(--f-mono); font-size: 9.5px;
          color: var(--agp-mute);
          letter-spacing: 0.07em; text-transform: uppercase;
          margin-bottom: 4px;
        }
        .agp-field-v {
          font-size: 13px; color: #fff;
          margin-bottom: 2px;
          min-height: 16px;
        }
        .agp-field-pending { color: var(--agp-mute-2); font-style: italic; }
        .agp-field-src {
          font-family: var(--f-mono); font-size: 9.5px;
          color: var(--agp-pink);
          letter-spacing: 0.04em;
          min-height: 12px;
        }

        .agp-section-h {
          display: flex; justify-content: space-between; align-items: baseline;
          margin-top: 6px;
          padding-bottom: 4px;
          font-family: var(--f-mono); font-size: 10.5px;
          color: rgba(243, 238, 247, 0.85);
          letter-spacing: 0.07em; text-transform: uppercase;
        }
        .agp-section-count { color: var(--agp-pink); }

        .agp-mems {
          display: flex; flex-direction: column; gap: 6px;
        }
        .agp-mem {
          display: grid; grid-template-columns: 110px 1fr auto;
          gap: 10px; align-items: center;
          padding: 8px 10px;
          background: rgba(244, 163, 196, 0.05);
          border: 1px solid rgba(244, 163, 196, 0.18);
          border-radius: 8px;
          font-size: 12.5px;
          animation: agp-mem-in .35s ease both;
        }
        @keyframes agp-mem-in {
          from { opacity: 0; transform: translateY(4px); }
          to { opacity: 1; transform: none; }
        }
        .agp-mem-empty {
          background: rgba(255, 255, 255, 0.015);
          border-color: var(--agp-line);
          opacity: 0.5;
          animation: none;
        }
        .agp-mem-empty .agp-mem-v { color: var(--agp-mute-2); font-style: italic; }
        .agp-mem-cat {
          font-family: var(--f-mono); font-size: 10px;
          color: var(--agp-pink);
          letter-spacing: 0.05em; text-transform: uppercase;
        }
        .agp-mem-v {
          color: #fff;
          line-height: 1.4;
        }
        .agp-mem-conf {
          display: flex; align-items: center; gap: 6px;
          font-family: var(--f-mono); font-size: 10px;
          color: var(--agp-mute);
        }
        .agp-mem-bar {
          width: 36px; height: 3px;
          background: rgba(255, 255, 255, 0.08);
          border-radius: 2px;
          overflow: hidden;
        }
        .agp-mem-fill {
          display: block; height: 100%;
          background: var(--agp-pink);
          transition: width .5s ease;
        }

        .agp-tags {
          display: flex; flex-wrap: wrap; gap: 6px;
          min-height: 28px;
        }
        .agp-tag {
          padding: 5px 10px;
          background: rgba(244, 163, 196, 0.1);
          border: 1px solid rgba(244, 163, 196, 0.3);
          color: var(--agp-pink);
          border-radius: 99px;
          font-family: var(--f-mono); font-size: 10.5px;
          letter-spacing: 0.04em;
          animation: agp-mem-in .35s ease both;
        }
        .agp-tag-empty {
          color: var(--agp-mute-2);
          background: transparent; border-color: var(--agp-line);
          font-style: italic; animation: none;
        }

        /* PREDICTIONS */
        .agp-predicts {
          display: flex; flex-direction: column; gap: 1px;
          background: var(--agp-line);
          border-radius: 8px; overflow: hidden;
        }
        .agp-pred {
          padding: 10px 12px;
          background: rgba(255, 255, 255, 0.02);
          display: flex; justify-content: space-between; align-items: baseline;
          gap: 12px;
          transition: background .35s ease;
        }
        .agp-pred.is-set { background: rgba(244, 163, 196, 0.05); }
        .agp-pred-k {
          font-family: var(--f-mono); font-size: 10px;
          color: var(--agp-mute);
          letter-spacing: 0.06em; text-transform: uppercase;
        }
        .agp-pred-v {
          font-family: var(--f-display); font-size: 14px;
          color: #fff; font-weight: 400;
          letter-spacing: -0.01em;
          text-align: right;
        }
        .agp-pred-thinking { color: var(--agp-mute-2); font-style: italic; font-weight: 400; }

        .agp-concierge {
          margin-top: 8px;
          padding: 12px 14px 12px;
          background: linear-gradient(180deg, rgba(244, 163, 196, 0.06), rgba(244, 163, 196, 0.02));
          border: 1px solid rgba(244, 163, 196, 0.2);
          border-radius: 12px;
          opacity: 0.5;
          transition: opacity .4s ease;
          flex: 1;
          display: flex; flex-direction: column; gap: 10px;
        }
        .agp-concierge.is-on { opacity: 1; }
        .agp-concierge-h {
          display: flex; justify-content: space-between; align-items: center;
        }
        .agp-concierge-tag {
          font-family: var(--f-mono); font-size: 10px;
          color: var(--agp-pink);
          letter-spacing: 0.07em; text-transform: uppercase;
        }
        .agp-concierge-pulse {
          width: 6px; height: 6px; border-radius: 50%;
          background: var(--agp-pink);
          box-shadow: 0 0 0 0 rgba(244, 163, 196, 0.55);
          animation: agp-pulse 2s infinite;
        }
        .agp-concierge-body {
          font-size: 12.5px; line-height: 1.6;
          color: #f3eef7;
          text-wrap: pretty;
        }
        .agp-concierge-body em { font-style: italic; color: var(--agp-pink); }
        .agp-concierge-pending { color: var(--agp-mute-2); font-style: italic; }
        .agp-concierge-actions {
          display: flex; gap: 6px; flex-wrap: wrap;
          padding-top: 8px;
          border-top: 1px solid rgba(244, 163, 196, 0.18);
        }
        .agp-concierge-action {
          padding: 4px 10px;
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid var(--agp-line-2);
          border-radius: 99px;
          font-family: var(--f-mono); font-size: 10.5px;
          color: #f3eef7;
          letter-spacing: 0.04em;
        }
      `}</style>
    </div>
  );
}

/* --------------------------------------------------------------
 * 2. CRON TICKER. Continuous AI maintenance, looping log.
 * ------------------------------------------------------------ */

function CrmAgentCronTicker() {
  const cycles = [
    { k: "Lifecycle", v: "re-evaluated 18,442 contacts · 12 stage flips" },
    { k: "Memory GC", v: "decayed 142 volatile preferences · pruned 18 superseded" },
    { k: "Reachability", v: "re-tested 24,118 channel states · 4 bounces" },
    { k: "Predictions", v: "refreshed LTV + churn for 18,442 contacts" },
    { k: "Tag refresh", v: "re-applied at-risk · lapsed · returning · high-value" },
    { k: "Segments", v: "recomputed 86 audiences · 14 anomalies flagged" },
    { k: "Concierge", v: "rendered 412 narrative summaries this hour" },
    { k: "Backfill", v: "re-enriched 64 incomplete profiles after new signal" },
  ];
  // duplicate for seamless loop
  const stream = [...cycles, ...cycles];

  return (
    <div className="agcron">
      <div className="agcron-h">
        <span className="agcron-tag">Continuous AI maintenance</span>
        <span className="agcron-sub">always running, no triggers</span>
      </div>
      <div className="agcron-rail">
        <div className="agcron-track">
          {stream.map((c, i) => (
            <div key={i} className="agcron-item">
              <span className="agcron-k">{c.k}</span>
              <span className="agcron-v">{c.v}</span>
              <span className="agcron-sep">·</span>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .agcron {
          margin-top: 28px;
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.07);
          border-radius: 14px;
          padding: 14px 0 14px;
          overflow: hidden;
        }
        .agcron-h {
          display: flex; justify-content: space-between; align-items: baseline;
          padding: 0 18px 12px;
          border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }
        .agcron-tag {
          font-family: var(--f-mono); font-size: 10.5px;
          color: #f4a3c4;
          letter-spacing: 0.08em; text-transform: uppercase;
        }
        .agcron-sub {
          font-family: var(--f-mono); font-size: 10.5px;
          color: rgba(243, 238, 247, 0.5);
          letter-spacing: 0.06em; text-transform: uppercase;
        }
        .agcron-rail {
          padding: 12px 0 0;
          mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
          -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
        }
        .agcron-track {
          display: flex;
          gap: 0;
          width: max-content;
          animation: agcron-scroll 60s linear infinite;
        }
        @keyframes agcron-scroll {
          from { transform: translateX(0); }
          to { transform: translateX(-50%); }
        }
        .agcron-item {
          display: inline-flex; align-items: baseline; gap: 10px;
          padding: 0 22px;
          font-size: 13px;
        }
        .agcron-k {
          font-family: var(--f-mono); font-size: 10.5px;
          color: #f4a3c4;
          letter-spacing: 0.07em; text-transform: uppercase;
        }
        .agcron-v { color: rgba(243, 238, 247, 0.85); }
        .agcron-sep { color: rgba(243, 238, 247, 0.25); margin-left: 12px; }
      `}</style>
    </div>
  );
}

/* --------------------------------------------------------------
 * 3. CAPABILITIES GRID. The 8 things the agent layer does.
 * ------------------------------------------------------------ */

function CrmAgentCapabilities() {
  const caps = [
    {
      n: "01",
      t: "Profile enrichment",
      b: "Country, languages, archetype, channel preference, tags. Inferred from signal, never overwriting an edit.",
    },
    {
      n: "02",
      t: "Memory extraction",
      b: "Every WhatsApp, DM, email, voice transcript, and PMS note read. Structured memories with confidence. Decays trust on volatile preferences.",
    },
    {
      n: "03",
      t: "Lifecycle inference",
      b: "Lapsed thresholds learnt per-guest. At-risk scored from sentiment, silence, and unresolved complaints. Returning-candidate fires before re-search.",
    },
    {
      n: "04",
      t: "AI Concierge panel",
      b: "Narrative summary in your interface language, suggested next message, open requests, risk flags. Re-rendered on every visit.",
    },
    {
      n: "05",
      t: "Segment intelligence",
      b: "Natural-language segment builder. Suggested audiences from clusters. Anomaly + overlap detection. Reachability scoring per channel.",
    },
    {
      n: "06",
      t: "Import wizard",
      b: "CSV, Excel, vCard, vendor exports. Column type inference, smart mapping, sanity & repair, dedup, memory inference, language enrichment, rollback.",
    },
    {
      n: "07",
      t: "Reservation intelligence",
      b: "Special-request extraction from booking notes. Anomaly flags. Operational priority scoring. Companion enrichment within a stay.",
    },
    {
      n: "08",
      t: "Continuous crons",
      b: "Lifecycle, memory GC, reachability, predictive refresh, tag refresh, segment recompute, concierge re-render, enrichment backfill. No human trigger.",
    },
  ];

  return (
    <div className="agcaps">
      {caps.map((c, i) => (
        <Reveal key={i} delay={i * 60}>
          <div className="agcaps-cell">
            <div className="agcaps-num">{c.n}</div>
            <div className="agcaps-t">{c.t}</div>
            <p className="agcaps-b">{c.b}</p>
          </div>
        </Reveal>
      ))}

      <style>{`
        .agcaps {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 1px;
          background: rgba(255, 255, 255, 0.07);
          border: 1px solid rgba(255, 255, 255, 0.07);
          border-radius: 14px;
          overflow: hidden;
        }
        @media (max-width: 1100px) { .agcaps { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 600px) { .agcaps { grid-template-columns: 1fr; } }
        .agcaps-cell {
          padding: 22px 22px 22px;
          background: linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0));
          height: 100%;
          display: flex; flex-direction: column; gap: 8px;
          transition: background .25s ease;
        }
        .agcaps-cell:hover {
          background: linear-gradient(180deg, rgba(244, 163, 196, 0.04), rgba(244, 163, 196, 0));
        }
        .agcaps-num {
          font-family: var(--f-mono); font-size: 10.5px;
          color: #f4a3c4;
          letter-spacing: 0.08em;
          margin-bottom: 6px;
        }
        .agcaps-t {
          font-family: var(--f-display);
          font-size: 22px; font-weight: 400;
          color: #fff;
          letter-spacing: -0.01em;
          line-height: 1.2;
          margin-bottom: 6px;
        }
        .agcaps-b {
          font-size: 13.5px; line-height: 1.6;
          color: rgba(243, 238, 247, 0.7);
          margin: 0;
          text-wrap: pretty;
        }
      `}</style>
    </div>
  );
}

/* --------------------------------------------------------------
 * Wrap export so consumers import only one piece.
 * ------------------------------------------------------------ */

window.CrmAgentLiveProfile = CrmAgentLiveProfile;
window.CrmAgentCronTicker = CrmAgentCronTicker;
window.CrmAgentCapabilities = CrmAgentCapabilities;