// Partners — connected world / alliances

const Partners = () => {
  const groups = [
    {
      label: "System Partners",
      items: [
        { name: "Dividend", src: "assets/dividend-logo.svg" },
        { name: "FVP", src: "assets/fvp-logo.png" },
      ],
    },
    {
      label: "Media Partners",
      items: [
        { name: "Westbrook", src: "assets/partners/westbrook.png" },
        { name: "PJX Media", src: "assets/partners/pjx.png" },
        { name: "Pixability", src: "assets/partners/pixability.png" },
        { name: "Kargo", src: "assets/partners/kargo.png" },
        { name: "Hulu", src: "assets/partners/hulu.png" },
        { name: "Catalina", src: "assets/partners/catalina.png" },
        { name: "Zeta", src: "assets/partners/zeta.png" },
        { name: "NBCUniversal", src: "assets/partners/nbcuniversal.png" },
        { name: "Disney", src: "assets/partners/disney.png" },
        { name: "LinkedIn", src: "assets/partners/linkedin.png" },
        { name: "Meta", src: "assets/partners/meta.png" },
        { name: "Google", src: "assets/partners/google.png" },
        { name: "Google Partner", src: "assets/partners/google-partner.jpg" },
        { name: "Microsoft Advertising Partner", src: "assets/partners/microsoft-advertising-partner.webp" },
      ],
    },
    {
      label: "Research Partners",
      items: [
        { name: "thinknow", src: "assets/partners/thinknow.png" },
        { name: "MRI Simmons", src: "assets/partners/mri-simmons.png" },
        { name: "Bastion", src: "assets/partners/bastion.png" },
      ],
    },
    {
      label: "Tracking & Verification",
      items: [
        { name: "DoubleClick", src: "assets/partners/doubleclick.png" },
        { name: "IAS", src: "assets/partners/ias.png" },
      ],
    },
  ];
  return (
    <section className="r-partners" style={{ background: "var(--paper-2)", padding: "120px 0" }}>
      <div className="container">
        <div className="r-grid-partners r-grid-1-1" style={{ display: "grid", gridTemplateColumns: "1fr 2.4fr", gap: 80, alignItems: "start" }}>
          <div>
            <SectionEyebrow index="(08)" label={copyText("home.partners.eyebrow")} />
            <h3 className="display" style={{
              fontSize: 44, letterSpacing: "-0.025em", lineHeight: 1, fontWeight: 700,
              margin: "24px 0 20px", maxWidth: 320,
            }}>
              {copyText("home.partners.heading_pre")}<span style={{ fontStyle: "italic", color: "var(--blue)" }}>{copyText("home.partners.heading_accent")}</span>
            </h3>
            <p style={{ fontSize: 17, lineHeight: 1.55, color: "var(--ink)", margin: 0, maxWidth: 320, letterSpacing: "-0.005em" }}>
              {copyText("home.partners.intro")}
            </p>
          </div>

          <div style={{ display: "flex", flexDirection: "column", gap: 40 }}>
            {groups.map((g) => (
              <div key={g.label}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 16 }}>
                  <div className="mono" style={{ color: "var(--ink)" }}>{g.label}</div>
                  <div className="mono" style={{ color: "var(--muted)" }}>{String(g.items.length).padStart(2, "0")} active</div>
                </div>
                <div className="r-grid-partner-logos" style={{
                  borderTop: "1px solid var(--rule-strong)",
                  paddingTop: 18,
                  display: "grid",
                  gridTemplateColumns: "repeat(6, 1fr)",
                  gap: 0,
                }}>
                  {g.items.map((it) => (
                    <div key={it.name} style={{
                      height: 80,
                      display: "grid",
                      placeItems: "center",
                      borderRight: "1px solid var(--rule)",
                      borderBottom: "1px solid var(--rule)",
                      padding: "12px 16px",
                      background: "var(--white)",
                    }}>
                      {it.wordmark ? (
                        <span className={it.badge ? "mono" : "display"} style={it.badge ? {
                          fontSize: 11, fontWeight: 500, letterSpacing: "0.06em",
                          textTransform: "uppercase",
                          color: "var(--ink)", opacity: 0.72,
                          padding: "5px 10px",
                          border: "1px solid var(--rule-strong)",
                          borderRadius: 99,
                          whiteSpace: "nowrap",
                        } : {
                          fontSize: 22, fontWeight: 700, letterSpacing: "-0.025em",
                          color: "var(--ink)", opacity: 0.78,
                        }}>{it.wordmark}</span>
                      ) : (
                        <img
                          src={it.src}
                          alt={it.name}
                          style={{
                            maxHeight: 32,
                            maxWidth: "70%",
                            width: "auto",
                            height: "auto",
                            objectFit: "contain",
                            filter: "grayscale(1)",
                            opacity: 0.78,
                          }}
                        />
                      )}
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

window.Partners = Partners;