/* ============================================================
 * INTEGRATIONS
 *
 * The partner wall. Proof, not a product pitch — nothing in the mega menu
 * duplicates it.
 *
 * THIS SECTION IS DERIVED, NEVER TYPED. It reads INTEGRATIONS from
 * integrations-data.jsx, the same source the /integrations page renders.
 * That is the whole point of the rewrite: the previous version was a
 * hand-written list that had drifted into naming Apaleo, protel,
 * Stayntouch, SiteMinder, Bookassist, GuestCentric, Revinate, Visito,
 * Expedia, Airbnb, Hotels.com and Agoda — none of which we connect. It
 * also claimed "27 systems connected today" while the real figure was
 * higher and made of entirely different names.
 *
 * A second hand-maintained list will drift again. So there is only one
 * list now, and this is a projection of it. If a partner belongs on the
 * homepage, it has to be in the catalogue first.
 *
 * MONOCHROME, and specifically monochrome via `mix-blend-mode: multiply`
 * rather than a brightness filter. Most of these assets are PNGs with a
 * baked white plate; `filter: brightness(0)` would turn each one into a
 * solid black rectangle. Multiply drops white to nothing against a light
 * ground, so the mark survives and the plate does not. Colour returns on
 * hover, which rewards a visitor for looking and keeps the wall calm
 * until they do.
 * ============================================================ */

/* A SAMPLE, not the catalogue. The homepage job is recognition — the
   visitor should see a name they know and conclude "these people are
   real" in about a second. That argues for the prominent names, not the
   complete ones; the full 72 live on /integrations, one click away.
 *
 * Selection is the globally recognisable (Oracle, Mews, Cloudbeds,
 * Stripe, TrustYou) plus the leaders of the markets we actually sell
 * into — a Mallorcan hotelier recognises Timon, Avalon and Roiback far
 * more readily than Oracle, and those names do more work here than a
 * longer list would.
 *
 * Ordered by hand for visual rhythm, not by any metric. Filtered against
 * the catalogue on render, so a rename or removal upstream drops the
 * logo rather than shipping a ghost. */
const SAMPLE_SLUGS = [
  "opera", "mews", "cloudbeds", "sihot", "avalon", "timon",
  "noray", "winhotel", "ulyses", "roiback", "mirai", "paraty",
  "neobookings", "witbooking", "dingus", "trustyou", "reviewpro", "123compareme",
];

const sample = SAMPLE_SLUGS
  .map((slug) => INTEGRATIONS.find((i) => i.slug === slug))
  .filter((i) => i && LOGO_FILES[i.slug]);

/* A shared box (max-height + max-width) equalizes FOOTPRINT, not visual
 * weight: Avalon (a thin-line circular emblem over small caption type) and
 * Timon (a small glyph over a three-line wordmark+tagline) have far less
 * ink coverage than a bold flat wordmark like Oracle or Sihot, so they
 * still read as quieter at the identical box size. object-fit:contain
 * can't fix that — it preserves the source's own whitespace. Named
 * per-slug so the boost travels with the logo, not with its position. */
const LOGO_SIZE_BOOST = { avalon: 1.4, timon: 1.65 };

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

/* Counted from the catalogue rather than typed, so the claim cannot drift
   away from the wall underneath it — which is exactly how the old number
   ended up wrong. */
const totalIntegrations = INTEGRATIONS.length;
const totalCategories = INTEGRATION_CATEGORIES.length;

const SectionIntegrations = () => (
  <section className="section-pad integ-section" id="integrations">
    <div className="container">
      <div className="integ-head">
        <Reveal><div className="eyebrow">Integrations</div></Reveal>
        <Reveal delay={120}>
          <h2 className="h-1" style={{ marginTop: 24, maxWidth: 860 }}>
            It plugs into the stack <span className="italic-accent">you already run.</span>
          </h2>
        </Reveal>
        <Reveal delay={220}>
          <p className="lead" style={{ marginTop: 24, maxWidth: 740 }}>
            Hotel groups are never on one system. GuestMaker reads your PMS, your booking engine
            and your guest apps, and turns all of it into one profile per guest, so the Brain
            answers with the booking in front of it, not a guess.
          </p>
        </Reveal>
      </div>

      <Reveal delay={300}>
        <ul className="integ-wall">
          {sample.map((item) => {
            const boost = LOGO_SIZE_BOOST[item.slug];
            return (
              <li
                key={item.slug}
                className="integ-logo"
                title={item.name}
                style={boost ? { height: 46 * boost } : undefined}
              >
                <img src={`${LOGO_BASE}${LOGO_FILES[item.slug]}?v=${LOGO_VERSION}`} alt={item.name} loading="lazy" />
              </li>
            );
          })}
        </ul>
      </Reveal>

      <Reveal>
        <div className="integ-foot">
          <p className="integ-count">
            A sample. <strong>{totalIntegrations}</strong> integrations across{" "}
            {totalCategories} categories.
          </p>
          <p className="integ-cta">
            <a className="integ-link" href="integrations.html">
              See every integration
            </a>{" "}
            <span className="italic-accent">or ask us about the one you run.</span>
          </p>
        </div>
      </Reveal>
    </div>

    <style>{`
      .integ-section { background: var(--bg-elev-1); --e: cubic-bezier(0.22, 1, 0.36, 1); }
      .integ-head { margin-bottom: 56px; }

      .integ-wall {
        list-style: none; margin: 0; padding: 40px 0;
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 44px 32px;
        align-items: center;
        border-top: 1px solid var(--hairline);
        border-bottom: 1px solid var(--hairline);
      }
      .integ-logo {
        height: 46px; display: flex; align-items: center; justify-content: center;
      }
      /* Monochrome at rest. multiply (not a brightness filter) because most
         of these PNGs carry a white plate that would otherwise render as a
         black box — see the header note.
         max-width is deliberately less than the column: without it, a wide
         flat wordmark (Oracle, Sihot) fills the whole cell at max-height
         while a squarer mark (Avalon's cloud+wordmark lockup, ~1.8:1) tops
         out far short of it — object-fit:contain preserves aspect ratio, so
         "same box" alone doesn't mean "same visual weight". Capping width
         forces the wide ones to give some of that back, which is what
         actually converges the two toward comparable size. */
      .integ-logo img {
        max-height: 100%; max-width: 132px; object-fit: contain;
        filter: grayscale(1);
        mix-blend-mode: multiply;
        opacity: .5;
        transition: opacity 420ms var(--e), filter 420ms var(--e);
      }
      .integ-wall:hover .integ-logo img { opacity: .34; }
      .integ-wall .integ-logo:hover img { filter: none; opacity: 1; }

      .integ-foot {
        margin-top: 48px;
        display: flex; flex-wrap: wrap; align-items: baseline;
        justify-content: space-between; gap: 20px 40px;
      }
      .integ-count {
        margin: 0;
        font-family: var(--f-mono);
        font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
        color: var(--ink-3);
      }
      .integ-count strong { color: var(--accent); font-weight: 500; }
      .integ-cta {
        margin: 0;
        font-family: var(--f-display);
        font-size: clamp(22px, 2.4vw, 32px);
        letter-spacing: -0.01em;
        color: var(--ink-2);
        text-wrap: balance;
      }
      .integ-link {
        color: var(--ink); text-decoration: none;
        border-bottom: 1px solid var(--hairline-strong);
        transition: border-color 320ms var(--e);
      }
      .integ-link:hover { border-color: var(--accent); }

      @media (max-width: 900px) { .integ-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
      @media (max-width: 560px) {
        .integ-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 20px; padding: 32px 0; }
        .integ-foot { flex-direction: column; align-items: flex-start; }
      }
      @media (max-width: 420px) {
        .integ-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      }

      @media (prefers-reduced-motion: reduce) {
        .integ-logo img { transition-duration: 1ms !important; }
      }
    `}</style>
  </section>
);

window.SectionIntegrations = SectionIntegrations;