/* eslint-disable */
/* global React */
/* hero-industria.jsx — HeroIndustria: visual del hero para las 6 landings de
   industria con composición fotográfica (agro, retail-farma, mineria, cpg,
   combustibles, medical-devices).

   Cada imagen ya trae tarjetas de dashboard + figura + sombra compuestas y
   rasterizadas (jerarquía correcta, persona delante). El único elemento que
   se agrega en código es el disco periwinkle de fondo (.tm-ind-hero-disc).
   El visual sangra hasta el borde derecho del viewport — ver .tm-ind-hero-bleed
   en industry.css. */

const HERO_IMAGE_MAP = {
  agro: { file: 'hero-agro-completo', alt: 'Tablero de cross-sell agro y mercado de capitales' },
  'retail-farma': { file: 'hero-farma-completo', alt: 'Tablero de reposición y conciliaciones por sucursal' },
  mineria: { file: 'hero-mineria-completo', alt: 'Tablero de balance de flota e indicadores SAP' },
  cpg: { file: 'hero-cpg-completo', alt: 'Tablero de alertas por tienda y SKU' },
  combustibles: { file: 'hero-energia-completo', alt: 'Tablero de scoring de riesgo y calendario de vencimientos' },
  'medical-devices': { file: 'hero-medical-completo', alt: 'Tablero de trazabilidad de devoluciones y SLA' },
};

const HeroIndustria = ({ industria }) => {
  const data = HERO_IMAGE_MAP[industria];
  if (!data) return null;

  const base = `public/hero/${data.file}`;

  return (
    <div className="tm-ind-hero-visual">
      <span className="tm-ind-hero-disc" aria-hidden="true" />
      <picture>
        <source srcSet={`${base}.avif`} type="image/avif" />
        <source srcSet={`${base}.webp`} type="image/webp" />
        <img
          src={`${base}.png`}
          alt={data.alt}
          width={1120}
          height={540}
          loading="eager"
          fetchpriority="high"
          decoding="async"
        />
      </picture>
    </div>
  );
};

Object.assign(window, { HeroIndustria });