// Guestmaker · Integrations strip · sits between the hero and the
// Contact Showcase.
//
// Was two rows of 20 vendor names that don't exist anywhere else on the
// site (Apaleo, Guestline, Stayntouch, RoomRaccoon, protel, Hotelogix,
// WebRezPro, GuestCentric, SHR Allora, Bookassist, Net Affinity,
// Profitroom, SiteMinder, RateGain, D-EDGE, STAAH, Cubilis, eRevMax,
// YieldPlanet — none of them in INTEGRATIONS), a "channel managers" row
// built entirely from names not catalogued anywhere, geometric SVG shapes
// standing in for logos, a header claiming "59 mapped / 38 on request /
// 21 on roadmap" with no source, and a LiveCount component that
// random-incremented a number every 3.2s — unused, but exactly the kind
// of thing that should never exist even dormant.
//
// Rebuilt on integrations-data.jsx, the same catalogue the homepage wall
// and /integrations.html already read from. Real logos (LOGO_FILES,
// same CDN assets), real names, real per-vendor live/available status.
// Channel managers dropped entirely — the catalogue has exactly one crs
// entry (Dingus), not enough to carry a row without padding it with
// fiction again.

const { useState: ciUseState } = React;

const I_FUCHSIA      = "#ED4D86";
const I_FUCHSIA_DEEP = "#C93A6B";
const I_PLUM         = "#211A22";

const I_INK     = "#1a1a1a";
const I_DIM     = "#6e6363";
const I_FAINT   = "#a99fa3";
const I_RULE    = "#e9e3d4";
const I_PAPER   = "#fbfaf6";
const I_CREAM   = "#f6f4ef";
const I_SURFACE = "#ffffff";

const I_MONO  = "'JetBrains Mono', ui-monospace, monospace";
const I_SERIF = "var(--f-display)";

const I_LOGO_BASE = "https://cdn.guestmaker.ai/marketing/homepage-v3/assets/logos/";

const STATUS = {
  live:      { label: "live",      color: I_FUCHSIA_DEEP },
  available: { label: "available", color: I_FAINT },
};

// ───── one partner card ─────
function PartnerCard({ slug, name, status, idx, moreHref, moreLabel }) {
  const [hover, setHover] = ciUseState(false);
  const isMore = !!moreHref;
  const statusMeta = STATUS[status] || null;
  const files = window.LOGO_FILES || {};
  const version = window.LOGO_VERSION || "1";
  const logoFile = files[slug];

  if (isMore) {
    return (
      <a
        href={moreHref}
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        style={{
          position: "relative",
          display: "flex", alignItems: "center", justifyContent: "center", gap: 8,
          padding: "16px 20px",
          background: hover ? I_SURFACE : "transparent",
          border: `1px solid ${hover ? I_FUCHSIA + "55" : I_RULE}`,
          borderRadius: 10,
          transition: "all 0.22s ease",
          textDecoration: "none",
          minHeight: 58,
          fontFamily: I_MONO, fontSize: 13, fontWeight: 500, letterSpacing: "0.02em",
          color: hover ? I_FUCHSIA_DEEP : I_FAINT,
          animation: `gm-fadein 0.4s ease ${idx * 0.04}s both`,
        }}
      >
        {moreLabel}
        <IconArrow size={13} />
      </a>
    );
  }

  return (
    <div
      title={name}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        position: "relative",
        display: "flex", alignItems: "center", justifyContent: "center",
        padding: "16px 20px",
        background: hover ? I_SURFACE : I_PAPER,
        border: `1px solid ${hover ? I_FUCHSIA + "55" : I_RULE}`,
        borderRadius: 10,
        transition: "all 0.22s ease",
        boxShadow: hover ? `0 8px 24px -12px ${I_FUCHSIA}55, 0 0 0 1px ${I_FUCHSIA}25 inset` : "none",
        cursor: "default",
        minHeight: 58,
        animation: `gm-fadein 0.4s ease ${idx * 0.04}s both`,
      }}
    >
      {logoFile ? (
        <img
          src={`${I_LOGO_BASE}${logoFile}?v=${version}`}
          alt={name}
          style={{
            maxHeight: 26, maxWidth: 120, objectFit: "contain",
            filter: "grayscale(1)",
            mixBlendMode: "multiply",
            opacity: hover ? 1 : 0.75,
            transition: "opacity 0.22s ease",
          }}
        />
      ) : (
        <span style={{
          fontFamily: "'Inter', system-ui, sans-serif",
          fontSize: 15, fontWeight: 600, color: I_INK, opacity: hover ? 1 : 0.8,
        }}>{name}</span>
      )}

      {statusMeta && (
        <span style={{
          position: "absolute",
          top: 7, right: 9,
          display: "inline-flex", alignItems: "center", gap: 4,
          fontFamily: I_MONO,
          fontSize: 8.5,
          letterSpacing: "0.14em",
          textTransform: "uppercase",
          color: statusMeta.color,
          fontWeight: 500,
          opacity: hover ? 1 : 0.7,
          transition: "opacity 0.22s ease",
          pointerEvents: "none",
        }}>
          <span style={{
            width: 5, height: 5, borderRadius: "50%",
            background: status === "live" ? statusMeta.color : "transparent",
            border: status === "live" ? "none" : `1px solid ${statusMeta.color}`,
            boxShadow: status === "live" ? `0 0 4px ${statusMeta.color}` : "none",
          }} />
          {statusMeta.label}
        </span>
      )}
    </div>
  );
}

// ───── one category row ─────
function CategoryRow({ eyebrow, sub, partners }) {
  return (
    <div style={{
      borderTop: `1px solid ${I_RULE}`,
      padding: "28px 0 32px",
    }}>
      <div style={{
        display: "flex", justifyContent: "space-between", alignItems: "baseline",
        marginBottom: 18,
      }}>
        <div style={{ display: "flex", alignItems: "baseline", gap: 14 }}>
          <span style={{
            fontFamily: I_MONO, fontSize: 11, letterSpacing: "0.18em",
            textTransform: "uppercase", color: I_FUCHSIA, fontWeight: 600,
          }}>{eyebrow}</span>
        </div>
        <span style={{ fontSize: 13, color: I_DIM, fontStyle: "italic", fontFamily: I_SERIF }}>
          {sub}
        </span>
      </div>

      <div style={{
        display: "grid",
        gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))",
        gap: 10,
      }}>
        {partners.map((p, i) => (
          <PartnerCard key={p.slug || p.moreHref} {...p} idx={i} />
        ))}
      </div>
    </div>
  );
}

// ───── data — every slug below exists in INTEGRATIONS (integrations-data.jsx),
// featured roughly by real liveBrands count, with the internationally
// recognized names (Opera, Mews, Cloudbeds, Mirai, Amadeus/TravelClick)
// kept visible rather than buried behind rank alone. ─────
const PMS_PARTNERS = [
  { slug: "avalon",     name: "Avalon",         status: "live" },
  { slug: "opera",      name: "Opera Cloud",    status: "live" },
  { slug: "mews",       name: "Mews",           status: "live" },
  { slug: "cloudbeds",  name: "Cloudbeds",      status: "live" },
  { slug: "noray",      name: "Noray",          status: "live" },
  { slug: "sihot",      name: "SIHOT 360",      status: "live" },
  { slug: "timon",      name: "Timon",          status: "live" },
  { slug: "aci-hotel",  name: "ACI Hotel",      status: "live" },
  { slug: "quohotel",   name: "QuoHotel",       status: "live" },
  { slug: "ulyses",     name: "Ulyses Cloud",   status: "live" },
  { slug: "winhotel",   name: "Winhotel",       status: "live" },
  { slug: "hestia",     name: "Hestia",         status: "live" },
  { moreHref: "../integrations.html", moreLabel: "See all" },
];

const BE_PARTNERS = [
  { slug: "neobookings",  name: "Neobookings",          status: "live" },
  { slug: "witbooking",   name: "Witbooking",           status: "live" },
  { slug: "roiback",      name: "Roiback",              status: "live" },
  { slug: "paraty",       name: "Paraty Tech",          status: "live" },
  { slug: "mirai",        name: "Mirai",                status: "live" },
  { slug: "travelclick",  name: "TravelClick iHotelier",status: "live" },
  { moreHref: "../integrations.html", moreLabel: "See all" },
];

// ───── section ─────
function IntegrationsSection() {
  return (
    <section data-screen-label="Integrations" style={{
      background: I_CREAM,
      padding: "100px clamp(20px,4vw,48px) 80px",
      fontFamily: "'Inter', system-ui, sans-serif",
      color: I_INK,
      position: "relative",
      overflow: "hidden",
    }}>
      {/* subtle wash */}
      <div style={{
        position: "absolute", top: -180, right: "-10%",
        width: 600, height: 600,
        background: `radial-gradient(circle, ${I_FUCHSIA}10, transparent 60%)`,
        pointerEvents: "none",
      }} />

      {/* header */}
      <div style={{ maxWidth: "var(--rail)", margin: "0 auto 36px", textAlign: "center", position: "relative" }}>
        <div className="eyebrow" style={{ justifyContent: "center" }}>WORKS WITH YOUR STACK</div>
        <h2 className="h-2" style={{ marginTop: 22, maxWidth: 880, marginInline: "auto" }}>
          Plugs into the systems{" "}
          <em className="italic-accent" style={{ display: "block" }}>
            you already run on.
          </em>
        </h2>
        <p className="lead" style={{ maxWidth: 660, margin: "20px auto 0" }}>
          Two-way sync with the property management systems and booking engines
          hotel groups actually run. Reservations, profiles and consents flowing
          in real time: see the full catalogue for the rest of the stack.
        </p>

        {/* capability strip — deliberately not a scale/count number: see PR notes */}
        <div style={{
          display: "inline-flex", gap: 0, marginTop: 26,
          background: I_SURFACE,
          border: `1px solid ${I_RULE}`,
          borderRadius: 999,
          padding: "4px",
          fontFamily: I_MONO,
        }}>
          {[
            { lbl: "Sync direction", val: "Two-way, real-time", c: I_FUCHSIA },
            { lbl: "Setup", val: "Guided, no CSV exports", c: I_PLUM },
          ].map((s, i) => (
            <div key={s.lbl} style={{
              padding: "8px 18px",
              borderRight: i < 1 ? `1px solid ${I_RULE}` : "none",
              display: "flex", flexDirection: "column", alignItems: "center", gap: 2,
            }}>
              <span style={{ fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase", color: I_FAINT, fontWeight: 500 }}>{s.lbl}</span>
              <span style={{ fontSize: 14, color: s.c, fontWeight: 600, fontVariantNumeric: "tabular-nums" }}>
                {s.val}
              </span>
            </div>
          ))}
        </div>
      </div>

      {/* rows */}
      <div style={{ maxWidth: "var(--rail)", margin: "0 auto" }}>
        <CategoryRow
          eyebrow="PMS · Property Management"
          sub="Reservations, room moves, folio · two-way"
          partners={PMS_PARTNERS}
        />
        <CategoryRow
          eyebrow="Booking Engines"
          sub="Direct bookings, abandoned carts, conversion events"
          partners={BE_PARTNERS}
        />

        {/* footer note */}
        <div style={{
          borderTop: `1px solid ${I_RULE}`,
          paddingTop: 20, marginTop: 8,
          display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 14,
          fontFamily: I_MONO, fontSize: 11, color: I_DIM,
          letterSpacing: "0.04em",
        }}>
          <div style={{ display: "flex", alignItems: "center", gap: 18, flexWrap: "wrap" }}>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
              <span style={{ width: 6, height: 6, borderRadius: "50%", background: I_FUCHSIA_DEEP, boxShadow: `0 0 5px ${I_FUCHSIA_DEEP}` }} />
              <span>live</span>
            </span>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
              <span style={{ width: 6, height: 6, borderRadius: "50%", background: "transparent", border: `1px solid ${I_FAINT}` }} />
              <span>available</span>
              <span style={{ color: I_FAINT, fontStyle: "italic", fontFamily: I_SERIF, letterSpacing: 0 }}>· built, not yet switched on</span>
            </span>
          </div>
          <a href="../integrations.html" style={{ color: I_FAINT, textDecoration: "none", borderBottom: `1px solid ${I_RULE}` }}>
            See every integration &rarr;
          </a>
        </div>
      </div>
    </section>
  );
}

window.IntegrationsSection = IntegrationsSection;