// Clients — left manifesto column + logo wall

const Clients = () => {
  const logos = [
    { name: "Chicken of the Sea", src: "assets/clients/chicken-of-the-sea.png", forceBW: true },
    { name: "Archer", src: "assets/clients/archer.png", forceBW: true },
    { name: "NBCUniversal", src: "assets/clients/nbcuniversal.png" },
    { name: "Activision Blizzard", src: "assets/clients/activision-blizzard.png" },
    { name: "Sony", src: "assets/clients/sony.png" },
    { name: "NFL", src: "assets/clients/nfl.png" },
    { name: "Nexon", src: "assets/clients/nexon.png" },
    { name: "Clinique", src: "assets/clients/clinique.png" },
    { name: "Jose Cuervo", src: "assets/clients/jose-cuervo.png" },
    { name: "Jollibee", src: "assets/clients/jollibee.png" },
    { name: "Princess Cruises", src: "assets/clients/princess-cruises.png" },
    { name: "Razer", src: "assets/clients/razer.png", forceBW: true },
    { name: "Soylent", src: "assets/clients/soylent.png" },
    { name: "DTS", src: "assets/clients/dts.png" },
    { name: "Scopely", src: "assets/clients/scopely.png" },
    { name: "Turtle Beach", src: "assets/clients/turtle-beach.png", sizeBoost: 1.35 },
    { name: "Trion Worlds", src: "assets/clients/trion-worlds.png", forceBW: true },
    { name: "ZICO", src: "assets/clients/zico.png" },
    { name: "KeVita", src: "assets/clients/kevita.png" },
    { name: "Osmo", src: "assets/clients/osmo.png" },
    { name: "Smart", src: "assets/clients/smart.png" },
    { name: "PLDT", src: "assets/clients/pldt.png" },
    { name: "Merle Norman", src: "assets/clients/merle-norman.png" },
    { name: "Sacred Heart University", src: "assets/clients/sacred-heart-university.png", forceBW: true, sizeBoost: 1.4 },
  ];
  const cols = 4;
  const rows = Math.ceil(logos.length / cols);
  return (
    <section className="r-clients" style={{ background: "var(--paper)", padding: "100px 0", borderTop: "1px solid var(--rule)" }}>
      <div className="container">
        <div className="r-grid-clients r-grid-1-1" style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 80, alignItems: "start" }}>
          <div>
            <SectionEyebrow index="(06)" label={copyText("home.clients.eyebrow")} />
            <h3 className="display" style={{
              fontSize: 40,
              letterSpacing: "-0.025em",
              lineHeight: 1.02,
              fontWeight: 600,
              margin: 0,
              marginTop: 24,
              maxWidth: 360,
            }}>
              {copyText("home.clients.heading_pre")}<span style={{ fontStyle: "italic", color: "var(--blue)", position: "relative", display: "inline-block" }}>
                {copyText("home.clients.heading_accent")}
                <SketchUnderline strokeWidth={3} color="#1AA5F5" style={{ position: "absolute", left: 0, bottom: "-0.18em", width: "100%", height: "0.22em" }} />
              </span>
            </h3>
            <p style={{ fontSize: 17, lineHeight: 1.5, color: "var(--ink)", letterSpacing: "-0.005em", marginTop: 24, maxWidth: 360 }}>
              {copyText("home.clients.intro")}
            </p>
          </div>
          <div className="r-grid-logos" style={{
            display: "grid",
            gridTemplateColumns: `repeat(${cols}, 1fr)`,
            border: "1px solid var(--rule)",
            background: "var(--white)",
          }}>
            {logos.map((logo, i) => {
              const col = i % cols;
              const row = Math.floor(i / cols);
              const isLastCol = col === cols - 1;
              const isLastRow = row === rows - 1;
              return (
                <div key={i} style={{
                  height: 110,
                  borderRight: !isLastCol ? "1px solid var(--rule)" : "none",
                  borderBottom: !isLastRow ? "1px solid var(--rule)" : "none",
                  display: "grid",
                  placeItems: "center",
                  padding: 14,
                  position: "relative",
                }}>
                  <img
                    src={logo.src}
                    alt={logo.name}
                    style={{
                      maxWidth: logo.sizeBoost ? `${70 * logo.sizeBoost}%` : "70%",
                      maxHeight: logo.sizeBoost ? 48 * logo.sizeBoost : 48,
                      width: "auto",
                      height: "auto",
                      objectFit: "contain",
                      filter: "grayscale(1)",
                      opacity: 0.65,
                      mixBlendMode: "multiply",
                      transition: "opacity 220ms ease, filter 220ms ease",
                    }}
                    onMouseEnter={(e) => {
                      e.currentTarget.style.filter = logo.forceBW ? "grayscale(1)" : "grayscale(0)";
                      e.currentTarget.style.opacity = "1";
                    }}
                    onMouseLeave={(e) => { e.currentTarget.style.filter = "grayscale(1)"; e.currentTarget.style.opacity = "0.65"; }}
                  />
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
};

window.Clients = Clients;