/* Brand wall component for AMARINE */

function BrandWall({ brands }) {
  const t = useT();
  const lp = useLocalizedPath();
  const photos = window.AMARINE_PHOTOS || {};
  const portfolioData = window.AMARINE_PORTFOLIO_DATA;
  const sourceItems = portfolioData ? portfolioData.getBrandWallItems() : [];
  const byTitle = new Map(sourceItems.map((item) => [item.title.toLowerCase(), item]));

  // Keep backward compatibility with custom brands input while defaulting to portfolio data.
  const list = (brands || sourceItems).map((brand) => {
    if (typeof brand === 'string') {
      const project = byTitle.get(brand.toLowerCase());
      return project ? { name: project.title, slug: project.slug, imageKey: project.imageKey } : null;
    }

    if (brand && brand.slug) {
      return {
        name: brand.name || brand.title || brand.slug,
        slug: brand.slug,
        imageKey: brand.imageKey,
      };
    }

    if (brand && brand.name) {
      const project = byTitle.get(String(brand.name).toLowerCase());
      return project ? { name: project.title, slug: project.slug, imageKey: project.imageKey } : null;
    }

    return null;
  }).filter(Boolean);

  return (
    <div className="brand-wall">
      {list.map((brand, i) => (
        <a
          key={brand.slug || i}
          className="brand-cell"
          href={lp(portfolioData.getProjectRoutePath(brand.slug))}
          aria-label={`${t('port.brand.open')} ${brand.name}`}
        >
          <div
            className="brand-image-layer"
            style={{ backgroundImage: photos[brand.imageKey] ? `url(${photos[brand.imageKey]})` : 'none' }}
            aria-hidden="true"
          />
          <div className="brand-overlay-layer" aria-hidden="true" />
          <span className="brand-name">{brand.name}</span>
        </a>
      ))}
    </div>
  );
}

Object.assign(window, { BrandWall });
window.__AMARINE_COMPONENTS__ = window.__AMARINE_COMPONENTS__ || {};
window.__AMARINE_COMPONENTS__.BrandWall = BrandWall;