// B&L ENGENHARIA — Carteira de clientes.
// Logos em versão monocromática (marca d'água, cor única) onde disponível;
// onde não há logo, exibe o nome em texto.
// Home: mostra 6 construtoras sorteadas (mudam a cada carregamento) + "ver todas".

const CLIENTES = [
  { name: "AF4", logo: "af4" },
  { name: "Ascen", logo: "ascen" },
  { name: "Brio Incorporadora", logo: "brio" },
  { name: "Caprem", logo: "caprem" },
  { name: "Construplan", logo: "construplan" },
  { name: "Copema", logo: "copema" },
  { name: "DPM Construtora", logo: "dpm" },
  { name: "Enoch", logo: "enoch" },
  { name: "Guzzo Construtora", logo: "guzzo" },
  { name: "Pafil Empreendimentos", logo: "pafil" },
  { name: "Pedreschi", logo: "pedreschi" },
  { name: "Pereira Alvim", logo: "pereira-alvim" },
  { name: "Perplan", logo: "perplan" },
  { name: "Stéfani Nogueira", logo: "stefani-nogueira" },
  { name: "Tavernise", logo: "tavernise" },
  { name: "Urben", logo: "urben" },
  { name: "Claretiano" },
  { name: "Prodelog" },
  { name: "Phercon" },
  { name: "CT7 Empreendimentos" },
  { name: "Arenco Projetos e Construções" },
];

function shuffleTake(arr, n) {
  const a = arr.slice();
  for (let i = a.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [a[i], a[j]] = [a[j], a[i]];
  }
  return a.slice(0, n);
}

function CliCell({ c }) {
  if (c.logo) {
    return (
      <div className="cli cli-logo" title={c.name}>
        <img src={`assets/clientes/mono/${c.logo}.png`} alt={c.name} loading="lazy" />
      </div>
    );
  }
  return (
    <div className="cli cli-name" title={c.name}>
      <span>{c.name}</span>
    </div>
  );
}

function Clientes({ home = false }) {
  // Na Home, sorteia 6 construtoras com logo (mudam a cada reload).
  const comLogo = CLIENTES.filter((c) => c.logo);
  const shown = React.useMemo(
    () => (home ? shuffleTake(comLogo, 6) : CLIENTES),
    [home]
  );

  return (
    <section className="clientes" id="clientes">
      <div className="wrap-wide">
        <div className="cli-head">
          <div>
            <div className="eyebrow">08 / Carteira</div>
            <h2>Alguns dos clientes que <span className="italic">confiam</span> na B&amp;L.</h2>
          </div>
          {!home && (
            <div style={{ fontFamily: "var(--ff-mono)", fontSize: 11, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--bl-mute)" }}>
              {CLIENTES.length} clientes ↓
            </div>
          )}
        </div>

        <div className={"cli-grid" + (home ? " cli-grid--home" : "")}>
          {shown.map((c, i) => (
            <CliCell c={c} key={c.name + i} />
          ))}
        </div>

        {home && (
          <div className="cli-more">
            <a href="clientes.html" className="btn btn-dark">
              Ver todas as construtoras
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7h10M7 2l5 5-5 5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </a>
          </div>
        )}
      </div>
    </section>
  );
}

window.Clientes = Clientes;