/* Picture — <img> con WebP responsive y respaldo JPEG.

   Por qué existe: el 2026-09-11 se midió la página a 390 px y movía ~1.9 MB de
   imagen. No era la galería del hero (25 KB): eran las fotos de sección,
   servidas como JPEG a tamaño completo y todas de golpe. Había además 16 .webp
   ya generados en assets/ que ningún componente referenciaba.

   `assetWidths` lo genera el script que crea las variantes, así que el srcset
   sólo anuncia anchos que existen de verdad: nunca se pide un archivo que da 404
   ni se amplía una foto por encima de su tamaño original.

   Uso: <Picture src="assets/cocina-linea.jpeg" sizes="(max-width: 760px) 100vw, 33vw" /> */

window.assetWidths = {
  "archivero-blanco": [400, 747],
  "archivero-cajones": [400, 800, 900],
  "archiveros-stock": [400, 800, 1100, 1200],
  "barra-servicio-modulos-inox": [400, 800, 900],
  "cabinas-inox-produccion-serie": [400, 800, 1100, 1200],
  "cabinet-archivero": [400, 800, 900],
  "campana-isla-negra-interior-inox": [400, 747],
  "campana-isla-render-inox": [400, 800, 1100, 1280, 1800],
  "campana-mural-negra-filtros": [400, 800, 960],
  "caseta-calle": [400, 800, 1100, 1200],
  "caseta-vidrio-calle": [400, 800, 1100, 1200],
  "caseta-vigilancia": [400, 800, 900],
  "caseta-vigilancia-garita-inox-01": [400, 800, 1100, 1200],
  "casetas-fila": [400, 800, 1100, 1600],
  "casetas-fila-2": [400, 747],
  "cocina-acero": [400, 747],
  "cocina-linea": [400, 800, 1040],
  "cocina-mesa": [400, 720],
  "cocina-trabajo": [400, 800, 1100, 1600],
  "counter-7eleven": [400, 800, 960],
  "counter-oxxo": [400, 800, 1100, 1600],
  "cubicles-azul": [400, 800, 1024],
  "exhibidor-iluminado": [400, 800, 960],
  "gabinete-exhibidor-vidrio-inox-01": [400, 800, 1100, 1200],
  "gabinete-telecom-abierto": [400, 800, 1040],
  "gabinete-telecom-cerrado": [400, 800, 1040],
  "gabinete-vidrio": [400, 800, 1100, 1200],
  "gabinetes-fila": [400, 800, 1100, 1200],
  "gabinetes-fila-2": [400, 800, 1100, 1200],
  "mesa-trabajo-tarja-doble-inox": [400, 800, 900],
  "mesas-trabajo-lote-industrial": [400, 800, 1100, 1600],
  "puesto-comida": [400, 720],
  "totem-pareja": [400, 800, 900],
  "totem-pareja-2": [400, 800, 1100, 1200],
  "totem-urban": [400, 800, 900],
  "totems-pareja": [400, 800, 1100, 1200],
};

const Picture = ({ src, alt = '', sizes = '100vw', loading = 'lazy', style, className, onClick }) => {
  const base = String(src || '').replace(/^assets\//, '').replace(/\.(jpeg|jpg)$/, '');
  const anchos = window.assetWidths[base];
  // El ancho mayor del manifiesto es el nativo y su archivo es `<base>.webp`,
  // no `<base>-<w>.webp`: por eso el ultimo se nombra distinto.
  const srcSet = anchos
    ? anchos.map((w, i) =>
        `assets/${base}${i === anchos.length - 1 ? '' : '-' + w}.webp ${w}w`).join(', ')
    : null;

  return (
    <picture>
      {srcSet && <source type="image/webp" srcSet={srcSet} sizes={sizes} />}
      <img
        src={src}
        alt={alt}
        loading={loading}
        decoding="async"
        className={className}
        style={style}
        onClick={onClick}
      />
    </picture>
  );
};

window.Picture = Picture;