/* global React */
function Clients() {
  const logos = [
    { name: "KADOKAWA", src: "assets/clients/kadokawa.png" },
    { name: "FRONTEO", src: "assets/clients/fronteo.png" },
    { name: "YAMAP", src: "assets/clients/yamap.png" },
    { name: "ACROVE", src: "assets/clients/acrove.png" },
    { name: "LAPRAS", src: "assets/clients/lapras.png" },
    { name: "AVA Intelligence", src: "assets/clients/ava-intelligence.png" },
    { name: "OPTIEUM Biotechnologies", src: "assets/clients/optieum.png" },
    { name: "ReDelta", src: "assets/clients/redelta.png" },
    { name: "コンクルー", src: "assets/clients/concluder.png" },
    { name: "Hinotori", src: "assets/clients/hinotori.jpg" },
    { name: "jamm", src: "assets/clients/jamm.png" },
    { name: "LINEA Innovations", src: "assets/clients/linea.png" },
    { name: "Numberline", src: "assets/clients/numberline.png" },
    { name: "Horizontal", src: "assets/clients/horizontal.svg" },
    { name: "Things", src: "assets/clients/things.jpg" },
    { name: "TECHSUITE", src: "assets/clients/techsuite.jpg" },
    { name: "YStory", src: "assets/clients/ystory.png" },
    { name: "Skyland Ventures", src: "assets/clients/skyland-ventures.jpg", boost: true },
    { name: "顧問バンク", src: "assets/clients/komonbank.png" },
    { name: "NCV", src: "assets/clients/ncv-dark.png", boost: true },
  ];
  return (
    <section className="clients section section--paper" data-screen-label="01c Clients">
      <div className="container">
        <div className="clients__head reveal">
          <span className="eyebrow">Trusted by</span>
          <h2 className="clients__title heading-jp">
            プライム上場企業からスタートアップまで、<br/>
            <em>業界をリード</em>する企業に選ばれています
          </h2>
        </div>
        <div className="clients__grid reveal reveal--delay-1">
          {logos.map((l, i) => (
            <div key={i} className={`clients__cell ${l.dark ? "clients__cell--dark" : ""} ${l.navy ? "clients__cell--navy" : ""} ${l.boost ? "clients__cell--boost" : ""}`}>
              <img src={l.src} alt={l.name} loading="lazy" />
            </div>
          ))}
        </div>
        <p className="clients__note reveal reveal--delay-2">
          ※掲載は一部のクライアント。順不同
        </p>
      </div>
    </section>
  );
}
window.Clients = Clients;