/* Clientes — mural de logos reais em marquee contínuo. */

const CLIENTS = [
  { file: "grupo-primo",     name: "Grupo Primo" },
  { file: "Betz-group",      name: "Betz Group" },
  { file: "Flavia-duarte",   name: "Flavia Duarte, Terapeuta e Mentora" },
  { file: "Neuroarq",        name: "Neuroarq Academy" },
  { file: "Premex",          name: "Premex Imports" },
  { file: "tessinari",       name: "Vanessa Tessinari Joias" },
  { file: "breezify",        name: "Breezify Ar Condicionado" },
  { file: "TLS-engenharia",  name: "TLS Engenharia" },
  { file: "Paty-Pradera",    name: "Patty Pradera Real Estate" },
  { file: "paty-domingos",   name: "Patricia Domingos, Organizadora e Mentora" },
  { file: "nosso-lugar",     name: "Igreja Nosso Lugar" },
];

function ClientItem({ c }) {
  return (
    <div className="client" title={c.name}>
      <img className="client__logo" src={"assets/clients/" + c.file + ".png"} alt={c.name} />
    </div>
  );
}

function Marquee({ items, reverse }) {
  const loop = items.concat(items); // duplicado para loop contínuo
  return (
    <div className={"marquee" + (reverse ? " marquee--rev" : "")}>
      <div className="marquee__track" aria-hidden={reverse ? "true" : undefined}>
        {loop.map((c, i) => <ClientItem key={i} c={c} />)}
      </div>
    </div>
  );
}

function Clients() {
  const rowA = CLIENTS.slice(0, 6);
  const rowB = CLIENTS.slice(6);
  return (
    <section className="clients" id="clientes">
      <div className="wrap">
        <div className="clients__head reveal">
          <div className="eyebrow" style={{ justifyContent: "center" }}>
            <span className="eyebrow__rule"></span>Confiança construída
          </div>
          <h2 className="h-section" style={{ marginTop: "16px" }}>marcas que já confiaram</h2>
        </div>
      </div>
      <div className="reveal d1">
        <Marquee items={rowA} />
        <Marquee items={rowB} reverse />
      </div>
    </section>
  );
}

window.Clients = Clients;