// Major clients section — name + description in columns, with letter motif background
function Clients() {
  const ref = useReveal();
  return (
    <section className="de-section de-clients" id="clients">
      <div className="de-clients__motif">CLIENTS</div>
      <div className="de-container">
        <div className="de-clients__head de-reveal is-in" ref={ref}>
          <div className="de-eyebrow">Trusted by · Major Clients</div>
          <h2 className="de-clients__heading">
            A roster of <em>principals.</em>
          </h2>
        </div>

        <div className="de-clients__grid">
          {CLIENTS.map((c, i) => (
            <article key={c.name} className={'de-clients__card de-reveal de-reveal-' + ((i % 3) + 2) + ' is-in'}>
              <div className="de-clients__tag">{c.tag}</div>
              <h3 className="de-clients__name">{c.name}</h3>
              <p className="de-clients__blurb">{c.blurb}</p>
              <a className="de-link de-clients__link">View Project <Icon name="arrow" size={14}/></a>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Clients = Clients;