// Clients — grid of brands we've shipped for
function ClientCell({ c, i }) {
  const [imgOk, setImgOk] = React.useState(true);
  return (
    <div className={`client-cell ${imgOk ? "" : "client-cell-noimg"}`}>
      {imgOk && (
        <div className="client-cell-thumb">
          <img
            src={`uploads/${c.slug}.jpg`}
            alt={c.name}
            loading="lazy"
            onError={() => setImgOk(false)}
          />
        </div>
      )}
      <div className="client-cell-body">
        <div className="client-cell-num">
          {String(i + 1).padStart(2, "0")} / CLIENTE
        </div>
        <div className="client-cell-name">
          {c.name}
          <span className="slash">/</span>
        </div>
        <div className="client-projects">
          {c.projects.map((p, idx) => (
            <div className="client-project" key={idx}>
              <div className="client-cell-tag">{p.tag}</div>
              <div className="client-cell-desc">{p.desc}</div>
            </div>
          ))}
        </div>
        <div className="client-cell-mark">/</div>
      </div>
    </div>
  );
}

function Clients() {
  const items = [
    {
      slug: "vasa",
      name: "Vasa",
      projects: [
        {
          tag: "botsapper · crm whatsapp",
          desc: "Servicio de envío de piezas publicitarias por WhatsApp, con CRM integrado a Botsapper.",
        },
      ],
    },
    {
      slug: "tigre",
      name: "Tigre",
      projects: [
        {
          tag: "datatalk",
          desc: "Sistema de análisis de datos con IA para el municipio de Tigre.",
        },
      ],
    },
    {
      slug: "venezia",
      name: "Venezia",
      projects: [
        { tag: "crm + bot de atención", desc: "Bot de atención al cliente y CRM." },
        { tag: "configurador con ia", desc: "Sistema de aplicación de texturas online con IA." },
      ],
    },
    {
      slug: "mel-propiedades",
      name: "Mel Propiedades",
      projects: [
        { tag: "sistema web", desc: "Sistema de propiedades a medida." },
        { tag: "bot de atención", desc: "Mantenimiento y programación del bot de atención." },
      ],
    },
    {
      slug: "miami-sun",
      name: "Miami Sun",
      projects: [
        {
          tag: "botsapper · turnos",
          desc: "CRM de WhatsApp (Botsapper) + sistema a medida para solicitar turnos de servicios.",
        },
        {
          tag: "pms + crm con ia",
          desc: "Plataforma para gestionar propiedades de Booking, Airbnb y VRBO desde un solo lugar.",
        },
      ],
    },
    {
      slug: "simple-pine",
      name: "Simple Pine",
      projects: [
        {
          tag: "ecommerce",
          desc: "Plataforma ecommerce para cliente en USA. Administración de Amazon, Etsy y eBay.",
        },
      ],
    },
    {
      slug: "catarain",
      name: "Catarain",
      projects: [
        { tag: "botsapper", desc: "CRM de WhatsApp (Botsapper) para atención al cliente." },
      ],
    },
    {
      slug: "quem",
      name: "QUEM",
      projects: [
        {
          tag: "ecommerce · web",
          desc: "Sitio web, tienda online y correo corporativo.",
        },
      ],
    },
    {
      slug: "cea",
      name: "CEA",
      projects: [
        {
          tag: "web + ia",
          desc: "Sitio web institucional y bot con IA para atención al cliente.",
        },
      ],
    },
    {
      slug: "ascensores-company",
      name: "Ascensores Company",
      projects: [
        { tag: "geolocalización", desc: "Sistema a medida de geolocalización de técnicos." },
        { tag: "web + ads", desc: "Sitio web y campañas de Ads." },
        { tag: "cotizador online", desc: "Sistema custom para cotizar ascensores online." },
      ],
    },
  ];

  const totalProjects = items.reduce((acc, c) => acc + c.projects.length, 0);

  return (
    <section className="clients" id="clients">
      <div className="container">
        <div className="clients-head">
          <span className="eyebrow">/ clientes</span>
          <h2 className="clients-title">
            Marcas que ya pusieron código en producción{" "}
            <span className="serif">con VH code</span>.
          </h2>
          <span className="clients-counter">
            {items.length} clientes · {totalProjects} proyectos · live
          </span>
        </div>

        <div className="clients-grid">
          {items.map((c, i) => (
            <ClientCell c={c} i={i} key={c.slug} />
          ))}
          <a className="client-cell client-cell-cta" href="#contact">
            <div className="client-cell-thumb client-cell-thumb-cta">
              <span className="client-cell-thumb-arrow">↗</span>
            </div>
            <div className="client-cell-body">
              <div className="client-cell-num">{String(items.length + 1).padStart(2, "0")} / NUEVO</div>
              <div className="client-cell-name">
                Tu proyecto<span className="slash">/</span>
              </div>
              <div className="client-cell-tag">empezar →</div>
              <div className="client-cell-desc">
                30 min de call. Te decimos si lo hacemos, cuánto sale y cuándo arranca.
              </div>
              <div className="client-cell-mark">/</div>
            </div>
          </a>
        </div>
      </div>
    </section>
  );
}

window.Clients = Clients;