/* ============================================================
 * CRM page, page sections
 * Segments rule builder, Reservations table, differentiators,
 * cross-module CTA strip, FAQ. Each is a top-level section
 * styled to match the rest of the site.
 * ============================================================ */
const { useState } = React;

/* === SEGMENT RULE BUILDER, recreated visual ============================ */
function CrmSegmentBuilder() {
  const [size, setSize] = useState(2841);
  const [active, setActive] = useState(1);

  const rules = [
    { k: "Stay status",     op: "is",        v: "Pre-stay (next 7 days)" },
    { k: "Spoken language", op: "is one of", v: "DE, AT-DE, CH-DE",      hi: true },
    { k: "Loyalty tier",    op: "is",        v: "Gold or Platinum" },
    { k: "Has companion",   op: "equals",    v: "Yes" },
    { k: "Last stay NPS",   op: "≥",         v: "8" },
  ];

  return (
    <div className="csb">
      <div className="csb-frame">
        <div className="csb-bar">
          <span className="bshot-dot r" /><span className="bshot-dot y" /><span className="bshot-dot g" />
          <div className="cpt-bar-url">guestmaker.ai · segments · returning DE-speakers, pre-stay</div>
        </div>

        <div className="csb-body">
          <div className="csb-head">
            <div>
              <div className="cpt-rsv-h-l">Segment</div>
              <div className="csb-name">Returning DE-speakers, <em>pre-stay window</em></div>
            </div>
            <div className="csb-size">
              <div className="cpt-rsv-h-l" style={{ textAlign: "right" }}>Live size</div>
              <div className="csb-size-num">{size.toLocaleString()}</div>
              <div className="csb-size-l">contacts · matches in real time</div>
            </div>
          </div>

          <div className="csb-rules">
            <div className="csb-rules-h">
              <span>Match</span>
              <span className="csb-and">ALL of the following</span>
              <span>conditions</span>
            </div>
            {rules.map((r, i) => (
              <div
                key={i}
                className={`csb-rule ${active === i ? "active" : ""} ${r.hi ? "hi" : ""}`}
                onClick={() => { setActive(i); setSize(2841 - i * 314 + (i % 2 === 0 ? 22 : -47)); }}
              >
                <span className="csb-rule-num">{String(i + 1).padStart(2, "0")}</span>
                <span className="csb-rule-k">{r.k}</span>
                <span className="csb-rule-op">{r.op}</span>
                <span className="csb-rule-v">{r.v}</span>
                <span className="csb-rule-x">×</span>
              </div>
            ))}
            <button className="csb-rule-add">+ Add condition</button>
          </div>

          <div className="csb-foot">
            <div className="csb-foot-l">
              <span className="csb-tag csb-tag-1">Use in journey</span>
              <span className="csb-tag csb-tag-2">Send broadcast</span>
              <span className="csb-tag csb-tag-3">Export CSV</span>
            </div>
            <div className="csb-foot-r">Saved · auto-refreshes every 5 min</div>
          </div>
        </div>
      </div>

      <style>{`
        .csb-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.18);
        }
        .csb-bar {
          display: flex; align-items: center; gap: 6px;
          padding: 10px 14px;
          background: var(--bg-elev-1);
          border-bottom: 1px solid var(--hairline);
        }
        .csb-body { padding: 26px 28px 22px; }
        .csb-head {
          display: flex; justify-content: space-between; align-items: flex-end;
          gap: 22px; flex-wrap: wrap;
          padding-bottom: 22px;
          border-bottom: 1px solid var(--hairline);
          margin-bottom: 22px;
        }
        .csb-name {
          font-family: var(--f-display);
          font-size: 28px; font-weight: 400;
          color: var(--ink);
          letter-spacing: -0.01em;
          margin-top: 4px;
        }
        .csb-name em { font-style: italic; color: var(--accent); }
        .csb-size { text-align: right; }
        .csb-size-num {
          font-family: var(--f-display);
          font-size: 44px; line-height: 1;
          color: var(--ink); font-weight: 400;
          letter-spacing: -0.02em;
          margin-top: 4px;
        }
        .csb-size-l {
          font-family: var(--f-mono); font-size: 10.5px;
          color: var(--ink-3); margin-top: 6px;
          letter-spacing: 0.04em;
        }

        .csb-rules { display: flex; flex-direction: column; gap: 8px; }
        .csb-rules-h {
          display: flex; align-items: center; gap: 12px;
          font-family: var(--f-mono); font-size: 11px;
          color: var(--ink-3);
          letter-spacing: 0.06em; text-transform: uppercase;
          margin-bottom: 4px;
        }
        .csb-and {
          padding: 3px 9px;
          background: var(--accent); color: white;
          border-radius: 4px; font-weight: 600;
          letter-spacing: 0.06em;
        }

        .csb-rule {
          display: grid;
          grid-template-columns: 32px 1.4fr 1fr 1.6fr 22px;
          gap: 14px; align-items: center;
          padding: 12px 16px;
          background: var(--bg-elev-1);
          border: 1px solid var(--hairline);
          border-radius: 10px;
          font-size: 13.5px;
          cursor: pointer;
          transition: all .15s ease;
        }
        .csb-rule:hover { border-color: var(--hairline-strong); }
        .csb-rule.active {
          border-color: var(--accent);
          box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
        }
        .csb-rule.hi { background: color-mix(in srgb, var(--accent) 6%, var(--bg-elev-1)); }
        .csb-rule-num {
          font-family: var(--f-mono); font-size: 11px;
          color: var(--ink-3);
        }
        .csb-rule-k { color: var(--ink); font-weight: 500; }
        .csb-rule-op {
          font-family: var(--f-mono); font-size: 11.5px;
          color: var(--ink-3);
          padding: 3px 9px;
          background: var(--bg-elev-2);
          border: 1px solid var(--hairline);
          border-radius: 4px;
          width: fit-content;
        }
        .csb-rule-v {
          color: var(--ink);
          padding: 3px 9px;
          background: color-mix(in srgb, var(--accent) 10%, var(--bg-elev-2));
          border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
          border-radius: 4px;
          width: fit-content;
          font-size: 12.5px;
        }
        .csb-rule-x {
          font-size: 18px; color: var(--ink-3);
          text-align: center;
          opacity: 0; transition: opacity .15s ease;
        }
        .csb-rule:hover .csb-rule-x { opacity: 1; }
        .csb-rule-add {
          margin-top: 4px;
          padding: 12px 16px;
          background: none;
          border: 1px dashed var(--hairline-strong);
          border-radius: 10px;
          color: var(--ink-3);
          font-family: var(--f-sans); font-size: 13px;
          cursor: pointer; text-align: left;
        }

        .csb-foot {
          margin-top: 22px;
          display: flex; justify-content: space-between; align-items: center;
          flex-wrap: wrap; gap: 12px;
        }
        .csb-foot-l { display: flex; gap: 8px; flex-wrap: wrap; }
        .csb-tag {
          padding: 7px 12px;
          font-size: 12px; font-weight: 500;
          border-radius: 6px;
          cursor: pointer;
        }
        .csb-tag-1 { background: var(--ink); color: var(--bg); }
        .csb-tag-2 { background: var(--bg-elev-1); border: 1px solid var(--hairline-strong); color: var(--ink); }
        .csb-tag-3 { background: var(--bg-elev-1); border: 1px solid var(--hairline-strong); color: var(--ink); }
        .csb-foot-r {
          font-family: var(--f-mono); font-size: 10.5px;
          color: var(--ink-3); letter-spacing: 0.04em;
        }

        @media (max-width: 720px) {
          .csb-rule { grid-template-columns: 24px 1fr 22px; gap: 8px; padding: 10px 12px; }
          .csb-rule-op, .csb-rule-v { grid-column: 2 / -1; }
        }
      `}</style>
    </div>
  );
}

/* === SEGMENT LIBRARY GRID =========================================== */
function CrmSegmentLibrary() {
  const groups = [
    {
      label: "Lifecycle",
      items: [
        { name: "First-time bookers",       size: 1284 },
        { name: "Returning guests",          size: 4920 },
        { name: "Pre-stay 7 days",           size: 2841 },
        { name: "In-house right now",        size: 318  },
        { name: "Post-stay 30 days",         size: 1604 },
        { name: "Lapsed (no stay 12mo+)",    size: 8120 },
      ],
    },
    {
      label: "Value",
      items: [
        { name: "Top 1% LTV",                 size: 312 },
        { name: "Direct bookers only",         size: 5240 },
        { name: "OTA-only (recoverable)",      size: 6018 },
        { name: "Avg spend > €500/night",      size: 902 },
      ],
    },
    {
      label: "Behavior",
      items: [
        { name: "Spa users",                  size: 1820 },
        { name: "Restaurant bookers",         size: 2410 },
        { name: "Pet owners",                 size: 387 },
        { name: "Anniversary travelers",      size: 218 },
      ],
    },
    {
      label: "Profile",
      items: [
        { name: "DE/AT/CH-speakers",         size: 3104 },
        { name: "ES-speakers",               size: 2218 },
        { name: "Solo travelers",             size: 944 },
        { name: "Families w/ kids",          size: 2102 },
      ],
    },
  ];

  return (
    <div className="csl">
      {groups.map((g, i) => (
        <div key={i} className="csl-group">
          <div className="csl-group-h">
            <span>{g.label}</span>
            <span className="csl-group-c">{g.items.length}</span>
          </div>
          {g.items.map((it, j) => (
            <div key={j} className="csl-row">
              <span className="csl-name">{it.name}</span>
              <span className="csl-size">{it.size.toLocaleString()}</span>
            </div>
          ))}
        </div>
      ))}
      <style>{`
        .csl {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 1px;
          background: var(--hairline);
          border: 1px solid var(--hairline);
          border-radius: 12px;
          overflow: hidden;
        }
        @media (max-width: 900px) { .csl { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 520px) { .csl { grid-template-columns: 1fr; } }
        .csl-group { background: var(--bg-elev-2); padding: 18px 18px 8px; }
        .csl-group-h {
          display: flex; justify-content: space-between; align-items: center;
          font-family: var(--f-mono); font-size: 10.5px;
          color: var(--accent);
          letter-spacing: 0.08em; text-transform: uppercase;
          padding-bottom: 10px;
          border-bottom: 1px solid var(--hairline);
          margin-bottom: 6px;
        }
        .csl-group-c {
          font-family: var(--f-mono); font-size: 10px;
          color: var(--ink-3); letter-spacing: 0;
        }
        .csl-row {
          display: flex; justify-content: space-between; align-items: center;
          padding: 8px 0;
          font-size: 13px;
          border-top: 1px solid var(--hairline);
        }
        .csl-row:first-of-type { border-top: 0; }
        .csl-name { color: var(--ink); }
        .csl-size {
          font-family: var(--f-mono); font-size: 11.5px;
          color: var(--ink-3);
        }
      `}</style>
    </div>
  );
}

/* === RESERVATIONS UNIFIED VIEW ====================================== */
function CrmReservationsView() {
  const rows = [
    { id: "247887", g: "Aoife Daly",    h: "Reverence Mare",   pms: "Mews",       in: "Jul 15", out: "Jul 18", n: 3, st: "Confirmed",  src: "Booking.com",  amt: "€743" },
    { id: "247831", g: "Tom O'Brien",   h: "Reverence Life",   pms: "Apaleo",     in: "Jul 14", out: "Jul 17", n: 3, st: "Checked-in", src: "Direct",        amt: "€612" },
    { id: "247720", g: "Marta Sanz",    h: "Reverence Mare",   pms: "Mews",       in: "Jul 16", out: "Jul 19", n: 3, st: "Confirmed",  src: "Direct",        amt: "€986" },
    { id: "247601", g: "Liam Walsh",    h: "Reverence City",   pms: "Cloudbeds",  in: "Jul 14", out: "Jul 18", n: 4, st: "Checked-in", src: "Expedia",       amt: "€1,240" },
    { id: "247410", g: "Sina Klein",    h: "Reverence Life",   pms: "Apaleo",     in: "Jul 18", out: "Jul 22", n: 4, st: "Confirmed",  src: "Direct",        amt: "€1,488" },
    { id: "247318", g: "John Reilly",   h: "Reverence Mare",   pms: "Mews",       in: "Jul 13", out: "Jul 14", n: 1, st: "Checked-out",src: "Booking.com",   amt: "€198" },
    { id: "247204", g: "Anna Pérez",    h: "Reverence City",   pms: "Cloudbeds",  in: "Jul 22", out: "Jul 28", n: 6, st: "Confirmed",  src: "Direct",        amt: "€1,920" },
  ];
  return (
    <div className="crv">
      <div className="csb-bar" style={{ borderRadius: "16px 16px 0 0" }}>
        <span className="bshot-dot r" /><span className="bshot-dot y" /><span className="bshot-dot g" />
        <div className="cpt-bar-url">guestmaker.ai · reservations · all properties</div>
      </div>
      <div className="crv-h">
        <div className="crv-h-l">
          <div>
            <div className="cpt-rsv-h-l">Reservations</div>
            <div className="crv-h-num">12,840 <span className="crv-h-sub">across 9 properties · 3 PMS · this year</span></div>
          </div>
        </div>
        <div className="crv-h-r">
          <span className="crv-pms"><span className="crv-pms-dot" style={{ background: "#1571F4" }} /> Mews · 4</span>
          <span className="crv-pms"><span className="crv-pms-dot" style={{ background: "#FF8A4C" }} /> Apaleo · 3</span>
          <span className="crv-pms"><span className="crv-pms-dot" style={{ background: "#0f9d58" }} /> Cloudbeds · 2</span>
        </div>
      </div>
      <div className="crv-table">
        <div className="crv-row crv-row-h">
          <span>Conf #</span><span>Guest</span><span>Hotel</span><span>PMS</span><span>Dates</span><span>Status</span><span>Source</span><span>Amt</span>
        </div>
        {rows.map((r, i) => {
          const pmsHue = r.pms === "Mews" ? "#1571F4" : r.pms === "Apaleo" ? "#FF8A4C" : "#0f9d58";
          return (
            <div key={i} className="crv-row">
              <span className="cpt-rsv-id">{r.id}</span>
              <span className="crv-g">{r.g}</span>
              <span>{r.h}</span>
              <span className="crv-pms-cell"><span className="crv-pms-dot" style={{ background: pmsHue }} />{r.pms}</span>
              <span className="crv-dates">{r.in} → {r.out}<span className="crv-n">{r.n}n</span></span>
              <span><span className={`cpt-rsv-st cpt-rsv-st-${r.st.toLowerCase().replace(/\s+/g, "-")}`}>{r.st}</span></span>
              <span className="cpt-rsv-src">{r.src}</span>
              <span className="cpt-rsv-amt">{r.amt}</span>
            </div>
          );
        })}
      </div>
      <style>{`
        .crv {
          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.18);
        }
        .crv-h {
          display: flex; justify-content: space-between; align-items: center;
          padding: 22px 26px;
          gap: 22px; flex-wrap: wrap;
          border-bottom: 1px solid var(--hairline);
        }
        .crv-h-num {
          font-family: var(--f-display);
          font-size: 32px; line-height: 1; font-weight: 400;
          color: var(--ink); letter-spacing: -0.01em;
          margin-top: 4px;
          display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
        }
        .crv-h-sub { font-family: var(--f-sans); font-size: 13px; color: var(--ink-3); font-weight: 400; }
        .crv-h-r { display: flex; gap: 16px; flex-wrap: wrap; }
        .crv-pms {
          font-family: var(--f-mono); font-size: 11px;
          color: var(--ink-3);
          display: inline-flex; align-items: center; gap: 7px;
          letter-spacing: 0.04em;
        }
        .crv-pms-dot { width: 7px; height: 7px; border-radius: 50%; }

        .crv-table { font-size: 12.5px; }
        .crv-row {
          display: grid;
          grid-template-columns: 76px 1.2fr 1.1fr 0.8fr 1.1fr 0.95fr 0.9fr 0.7fr;
          gap: 12px; align-items: center;
          padding: 11px 26px;
        }
        .crv-row + .crv-row { border-top: 1px solid var(--hairline); }
        .crv-row-h {
          background: var(--bg-elev-1);
          font-family: var(--f-mono); font-size: 10px;
          color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em;
        }
        .crv-g { font-weight: 500; color: var(--ink); }
        .crv-pms-cell {
          display: inline-flex; align-items: center; gap: 7px;
          font-family: var(--f-mono); font-size: 11px;
          color: var(--ink-2);
        }
        .crv-dates { display: inline-flex; align-items: baseline; gap: 8px; color: var(--ink); }
        .crv-n {
          font-family: var(--f-mono); font-size: 10px;
          color: var(--ink-3);
          padding: 2px 5px;
          background: var(--bg-elev-1);
          border-radius: 3px;
        }
        @media (max-width: 1000px) {
          .crv-table { overflow-x: auto; }
          .crv-row { min-width: 880px; }
        }
      `}</style>
    </div>
  );
}

/* === HOTEL DIFFERENTIATORS, 3 vertical features ===================== */
function CrmDifferentiators() {
  const items = [
    {
      tag: "Booking-anchored",
      title: <>Every contact is anchored to a <em>real reservation</em>, not an email address.</>,
      body: "Generic CRMs treat contacts as standalone records and bolt orders on later. We invert it: bookings are first-class, contacts hang off them. That single decision makes everything downstream, journeys, segments, attribution, work the way hotels actually operate.",
      stat: "2.1×",
      statL: "more accurate guest match rate vs generic CRMs",
    },
    {
      tag: "Multi-PMS by default",
      title: <>One guest record across every property, even when your <em>PMS systems disagree</em>.</>,
      body: "Most groups run mixed PMS estates, Mews here, Apaleo there, Cloudbeds at the smaller properties. Our CDP layer deduplicates and resolves contacts across all of them, in real time, with transparent merge logs. You see one guest, not four.",
      stat: "84%",
      statL: "duplicate reduction across multi-PMS portfolios",
    },
    {
      tag: "Every channel writes back",
      title: <>WhatsApp, Instagram, voice, email, web, every channel <em>updates the profile</em>.</>,
      body: "When a guest mentions a dietary need on WhatsApp, asks for a high floor on the phone, or DMs a question on Instagram, our agents extract the signal and write it back to memory. The CRM is the long-term store, every channel is just an interface onto it.",
      stat: "47",
      statL: "median memories captured per loyal guest",
    },
  ];
  return (
    <div className="crd">
      {items.map((it, i) => (
        <article key={i} className="crd-item">
          <div className="crd-top">
            <div className="eyebrow" style={{ justifyContent: "flex-start" }}>{it.tag}</div>
            <h3 className="h-3 crd-h">{it.title}</h3>
          </div>
          <p className="crd-body">{it.body}</p>
          <div className="crd-stat">
            <div className="crd-stat-num">{it.stat}</div>
            <div className="crd-stat-l">{it.statL}</div>
          </div>
        </article>
      ))}
      <style>{`
        .crd {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 1px;
          background: var(--hairline);
          border-top: 1px solid var(--hairline);
          border-bottom: 1px solid var(--hairline);
        }
        @media (max-width: 900px) { .crd { grid-template-columns: 1fr; } }
        .crd-item {
          background: var(--bg);
          padding: 36px 32px 36px;
          display: flex; flex-direction: column; gap: 18px;
        }
        .crd-h {
          font-family: var(--f-display);
          font-size: clamp(22px, 2vw, 28px);
          font-weight: 400; color: var(--ink);
          line-height: 1.2; letter-spacing: -0.01em;
          margin: 0;
        }
        .crd-h em { font-style: italic; color: var(--accent); }
        .crd-body {
          font-size: 14.5px; line-height: 1.65;
          color: var(--ink-2);
          margin: 0;
          flex: 1;
        }
        .crd-stat {
          padding-top: 20px;
          border-top: 1px solid var(--hairline);
        }
        .crd-stat-num {
          font-family: var(--f-display);
          font-size: 44px; line-height: 1;
          color: var(--accent); font-weight: 400;
          letter-spacing: -0.02em;
        }
        .crd-stat-l {
          margin-top: 8px;
          font-family: var(--f-mono); font-size: 11px;
          color: var(--ink-3);
          letter-spacing: 0.04em;
        }
      `}</style>
    </div>
  );
}

window.CrmSegmentBuilder = CrmSegmentBuilder;
window.CrmSegmentLibrary = CrmSegmentLibrary;
window.CrmReservationsView = CrmReservationsView;
window.CrmDifferentiators = CrmDifferentiators;
