/* ============================================================
 * CRM "A different problem" — premium editorial section.
 * One massive headline. A real, animated guest-collision
 * vignette on the right (four channels, same person, on
 * the same day) that makes the abstract argument concrete.
 * Three-column footer becomes a thin numbered argument bar.
 * ============================================================ */

const { useState: useStateDP, useEffect: useEffectDP, useRef: useRefDP } = React;

function CrmDifferentProblem() {
  // The same guest, four touchpoints, one day. Anchored to a real-feeling timeline.
  const events = [
    { t: "23:11",  ch: "wa",   from: "Aoife · Dublin",       text: "Hey, can we sort a late check-in for tomorrow? Flight lands 23:40.", color: "var(--c-whatsapp)" },
    { t: "08:42",  ch: "ig",   from: "@aoife.flynn",         text: "Is the rooftop bar open in October? Coming Thursday with my partner.", color: "var(--c-instagram)" },
    { t: "10:05",  ch: "tel",  from: "+353 87 ····",         text: "Called reception · 1:24 · asked about parking and breakfast hours.",   color: "var(--c-voice)" },
    { t: "14:33",  ch: "em",   from: "aoife.flynn@···",      text: "Email · breakfast included? My partner is vegetarian.",                color: "var(--c-email)" },
  ];

  const [active, setActive] = useStateDP(0);
  useEffectDP(() => {
    const id = setInterval(() => setActive(a => (a + 1) % events.length), 2400);
    return () => clearInterval(id);
  }, []);

  // PMS / property labels touched by these messages
  const sources = [
    { label: "Reverence Mare",      pms: "Mews",    hot: [0, 1, 3] },
    { label: "Reverence Centro",    pms: "Apaleo",  hot: [2] },
    { label: "Reverence Cala",      pms: "Mews",    hot: [] },
  ];

  return (
    <div className="cdpx-wrap">
      {/* TOP: huge editorial moment, headline + vignette */}
      <div className="cdpx-top">
        <div className="cdpx-head">
          <Reveal>
            <div className="eyebrow" style={{ marginBottom: 22 }}>A different problem</div>
          </Reveal>
          <Reveal delay={80}>
            <h2 className="cdpx-h">
              Hotel groups don't have a contact&nbsp;problem,<br />
              they have a <span className="italic-accent">guest</span>&nbsp;problem.
            </h2>
          </Reveal>
          <Reveal delay={160}>
            <p className="cdpx-sub">
              One person reaches you on four channels, in three languages, across two properties,
              on the same Tuesday. A B2B CRM sees four leads. A hotel CRM sees Aoife.
            </p>
          </Reveal>
        </div>

        {/* The vignette: same guest, four touchpoints, one day */}
        <div className="cdpx-vignette" aria-hidden="false">
          <div className="cdpx-vignette-frame">
            <div className="cdpx-vignette-head">
              <span className="cdpx-vignette-tag">Tuesday · one guest</span>
              <span className="cdpx-vignette-id">Aoife&nbsp;Flynn · contact #18441</span>
            </div>

            <div className="cdpx-events">
              {events.map((e, i) => {
                const isActive = i === active;
                return (
                  <div key={i} className={`cdpx-ev${isActive ? " is-active" : ""}`}>
                    <div className="cdpx-ev-time">{e.t}</div>
                    <div
                      className="cdpx-ev-dot"
                      style={{ background: e.color }}
                    />
                    <div className="cdpx-ev-body">
                      <div className="cdpx-ev-meta">
                        <span className="cdpx-ev-channel" style={{ color: e.color }}>
                          {e.ch === "wa" && "WhatsApp"}
                          {e.ch === "ig" && "Instagram DM"}
                          {e.ch === "tel" && "Reception · voice"}
                          {e.ch === "em" && "Email"}
                        </span>
                        <span className="cdpx-ev-from">{e.from}</span>
                      </div>
                      <div className="cdpx-ev-text">{e.text}</div>
                    </div>
                  </div>
                );
              })}
            </div>

            <div className="cdpx-resolve">
              <div className="cdpx-resolve-line">
                <span className="cdpx-resolve-l">Resolved to</span>
                <span className="cdpx-resolve-r">
                  <span className="cdpx-resolve-name">Aoife Flynn</span>
                  <span className="cdpx-resolve-meta">EN · IE · returning · 3rd stay</span>
                </span>
              </div>
              <div className="cdpx-resolve-srcs">
                {sources.map((s, i) => (
                  <div key={i} className={`cdpx-src${s.hot.includes(active) ? " is-hot" : ""}`}>
                    <span className="cdpx-src-name">{s.label}</span>
                    <span className="cdpx-src-pms">{s.pms}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* BOTTOM: thin numbered argument */}
      <div className="cdpx-args">
        {[
          {
            n: "01",
            t: "B2B CRMs were built for pipelines",
            b: "Lead, opportunity, deal, account. Hotel groups don't operate that way. A guest is a person who slept in a room on a date, sometimes with their partner, sometimes with a dog, sometimes for the third time this year. They're identifiable by a booking, not a job title.",
          },
          {
            n: "02",
            t: "One guest, every channel",
            b: "They reach you on WhatsApp at 11 pm. They DM Instagram about the rooftop bar. They call reception about a late check-in. They email about breakfast. Across nine properties, three PMS instances, and six channels, they are still one person.",
          },
          {
            n: "03",
            t: "A record anchored to reality",
            b: "GuestMaker's CRM is built around what guests actually do, anchored to bookings, enriched by every conversation, surfaced to every agent. Not a contact database. The long-term memory of your hotel group.",
          },
        ].map((c, i) => (
          <Reveal key={i} delay={140 + i * 80}>
            <div className="cdpx-arg">
              <div className="cdpx-arg-num">{c.n}</div>
              <div className="cdpx-arg-t">{c.t}</div>
              <p className="cdpx-arg-b">{c.b}</p>
            </div>
          </Reveal>
        ))}
      </div>

      <style>{`
        .cdpx-wrap { display: flex; flex-direction: column; gap: 90px; }
        @media (max-width: 900px) { .cdpx-wrap { gap: 56px; } }

        /* TOP: split, headline left, vignette right */
        .cdpx-top {
          display: grid;
          grid-template-columns: 1.05fr 1fr;
          gap: 56px 80px;
          align-items: end;
        }
        @media (max-width: 1020px) {
          .cdpx-top { grid-template-columns: 1fr; gap: 48px; align-items: stretch; }
        }
        .cdpx-head { padding-bottom: 8px; }
        .cdpx-h {
          font-family: var(--f-display);
          font-size: clamp(36px, 4vw, 56px);
          font-weight: 400;
          color: var(--ink);
          letter-spacing: -0.022em;
          line-height: 1.06;
          margin: 0 0 24px;
          max-width: 22ch;
          text-wrap: pretty;
        }
        .cdpx-h .italic-accent { font-style: italic; color: var(--accent); }
        .cdpx-sub {
          font-size: 18px; line-height: 1.6;
          color: var(--ink-2);
          margin: 0;
          max-width: 38ch;
          text-wrap: pretty;
        }

        /* RIGHT: vignette frame */
        .cdpx-vignette {
          position: relative;
        }
        .cdpx-vignette::before {
          content: "";
          position: absolute;
          inset: -28px -28px -28px -28px;
          background: radial-gradient(60% 70% at 70% 40%, color-mix(in srgb, var(--c-instagram) 12%, transparent) 0%, transparent 70%);
          z-index: 0;
          pointer-events: none;
        }
        .cdpx-vignette-frame {
          position: relative;
          z-index: 1;
          background: var(--bg);
          border: 1px solid var(--hairline);
          border-radius: 18px;
          padding: 22px 24px 18px;
          box-shadow:
            0 1px 0 rgba(0,0,0,0.02),
            0 30px 60px -30px rgba(13, 5, 20, 0.18),
            0 8px 20px -10px rgba(13, 5, 20, 0.06);
        }
        .cdpx-vignette-head {
          display: flex; justify-content: space-between; align-items: baseline;
          gap: 16px;
          padding-bottom: 14px;
          border-bottom: 1px solid var(--hairline);
          margin-bottom: 10px;
        }
        .cdpx-vignette-tag {
          font-family: var(--f-mono);
          font-size: 10.5px; letter-spacing: 0.08em;
          text-transform: uppercase;
          color: var(--accent);
        }
        .cdpx-vignette-id {
          font-family: var(--f-mono); font-size: 11px;
          color: var(--ink-3);
        }

        /* event rows */
        .cdpx-events {
          display: flex; flex-direction: column;
        }
        .cdpx-ev {
          display: grid;
          grid-template-columns: 56px 14px 1fr;
          gap: 12px;
          align-items: start;
          padding: 14px 0;
          border-bottom: 1px solid var(--hairline);
          opacity: 0.55;
          transition: opacity .35s ease, background .35s ease;
          position: relative;
        }
        .cdpx-ev:last-child { border-bottom: 0; }
        .cdpx-ev.is-active { opacity: 1; }
        .cdpx-ev.is-active::before {
          content: "";
          position: absolute;
          left: -14px; right: -14px; top: 4px; bottom: 4px;
          background: color-mix(in srgb, var(--accent) 5%, transparent);
          border-radius: 8px;
          z-index: -1;
          animation: cdpx-pulse 2.4s ease-out;
        }
        @keyframes cdpx-pulse {
          0% { background: color-mix(in srgb, var(--accent) 14%, transparent); }
          100% { background: color-mix(in srgb, var(--accent) 5%, transparent); }
        }
        .cdpx-ev-time {
          font-family: var(--f-mono); font-size: 11.5px;
          color: var(--ink-3);
          padding-top: 2px;
        }
        .cdpx-ev-dot {
          width: 10px; height: 10px;
          border-radius: 50%;
          margin-top: 5px;
          box-shadow: 0 0 0 4px color-mix(in srgb, var(--bg) 100%, transparent);
        }
        .cdpx-ev.is-active .cdpx-ev-dot {
          box-shadow: 0 0 0 4px var(--bg), 0 0 0 8px color-mix(in srgb, currentColor 18%, transparent);
        }
        .cdpx-ev-meta {
          display: flex; gap: 10px; align-items: baseline;
          margin-bottom: 4px;
        }
        .cdpx-ev-channel {
          font-family: var(--f-mono); font-size: 10.5px;
          letter-spacing: 0.06em; text-transform: uppercase;
          font-weight: 500;
        }
        .cdpx-ev-from {
          font-size: 12px; color: var(--ink-3);
        }
        .cdpx-ev-text {
          font-size: 14px; color: var(--ink);
          line-height: 1.5;
        }

        /* resolve panel */
        .cdpx-resolve {
          margin-top: 14px;
          padding: 14px 16px 12px;
          background: color-mix(in srgb, var(--c-instagram) 4%, var(--bg-elev-1));
          border: 1px dashed color-mix(in srgb, var(--c-instagram) 30%, var(--hairline));
          border-radius: 12px;
        }
        .cdpx-resolve-line {
          display: flex; align-items: center; justify-content: space-between;
          gap: 12px;
          padding-bottom: 10px;
          border-bottom: 1px solid color-mix(in srgb, var(--c-instagram) 14%, transparent);
          margin-bottom: 10px;
        }
        .cdpx-resolve-l {
          font-family: var(--f-mono); font-size: 10.5px;
          letter-spacing: 0.08em; text-transform: uppercase;
          color: var(--c-instagram);
        }
        .cdpx-resolve-r {
          display: flex; align-items: baseline; gap: 10px;
        }
        .cdpx-resolve-name {
          font-family: var(--f-display); font-size: 18px;
          color: var(--ink); font-weight: 400;
          letter-spacing: -0.01em;
        }
        .cdpx-resolve-meta {
          font-family: var(--f-mono); font-size: 11px; color: var(--ink-3);
        }
        .cdpx-resolve-srcs {
          display: grid; grid-template-columns: repeat(3, 1fr);
          gap: 8px;
        }
        @media (max-width: 520px) { .cdpx-resolve-srcs { grid-template-columns: 1fr; } }
        .cdpx-src {
          padding: 8px 10px;
          background: var(--bg);
          border: 1px solid var(--hairline);
          border-radius: 8px;
          display: flex; flex-direction: column; gap: 2px;
          transition: border-color .35s ease, background .35s ease;
        }
        .cdpx-src.is-hot {
          border-color: color-mix(in srgb, var(--c-instagram) 60%, var(--hairline));
          background: color-mix(in srgb, var(--c-instagram) 6%, var(--bg));
        }
        .cdpx-src-name {
          font-size: 12.5px; color: var(--ink); font-weight: 500;
        }
        .cdpx-src-pms {
          font-family: var(--f-mono); font-size: 10px;
          color: var(--ink-3);
          letter-spacing: 0.06em; text-transform: uppercase;
        }

        /* BOTTOM: arguments — looser, narrower, indented */
        .cdpx-args {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 0;
          border-top: 1px solid var(--hairline);
          padding-top: 36px;
        }
        @media (max-width: 900px) {
          .cdpx-args { grid-template-columns: 1fr; gap: 0; }
        }
        .cdpx-arg {
          padding: 4px 36px 4px 0;
          border-right: 1px solid var(--hairline);
          max-width: 36ch;
        }
        .cdpx-arg:last-child { border-right: 0; padding-right: 0; }
        .cdpx-args > .reveal + .reveal .cdpx-arg { padding-left: 36px; }
        @media (max-width: 900px) {
          .cdpx-arg { border-right: 0; border-bottom: 1px solid var(--hairline); padding: 24px 0 24px !important; max-width: 60ch; }
          .cdpx-args > .reveal:last-child .cdpx-arg { border-bottom: 0; padding-bottom: 0 !important; }
        }
        .cdpx-arg-num {
          font-family: var(--f-mono); font-size: 11px;
          color: var(--accent);
          letter-spacing: 0.08em;
          margin-bottom: 16px;
        }
        .cdpx-arg-t {
          font-family: var(--f-display);
          font-size: 22px; font-weight: 400;
          color: var(--ink);
          letter-spacing: -0.01em;
          line-height: 1.25;
          margin-bottom: 14px;
        }
        .cdpx-arg-b {
          font-size: 14.5px; line-height: 1.7;
          color: var(--ink-2);
          margin: 0;
          text-wrap: pretty;
        }
      `}</style>
    </div>
  );
}

window.CrmDifferentProblem = CrmDifferentProblem;
