const { useState, useEffect } = React;

function ImageTiles() {
  const [active, setActive] = useState(false);

  useEffect(() => {
    // Kích hoạt bung tỏa ảnh sau khi Preloader kết thúc
    const timer = setTimeout(() => {
      setActive(true);
    }, 1800);
    return () => clearTimeout(timer);
  }, []);

  const tiles = [
    {
      id: 'left',
      src: 'assets/images/vegetarian-samples/menu/banh-mi-pate-nam.png',
      alt: 'Bánh mì pate nấm chay thơm ngon',
      className: 'hero-image-tile hero-image-tile--left'
    },
    {
      id: 'middle',
      src: 'assets/images/vegetarian-samples/menu/lau-sa-te-chay.png',
      alt: 'Nồi lẩu sa tế chay rau nấm ấm áp',
      className: 'hero-image-tile hero-image-tile--middle'
    },
    {
      id: 'right',
      src: 'assets/images/vegetarian-samples/menu/tra-dau-den.png',
      alt: 'Trà đậu đen thanh mát tốt cho sức khỏe',
      className: 'hero-image-tile hero-image-tile--right'
    }
  ];

  return (
    <div className={`hero-image-tiles ${active ? 'is-active' : ''}`} aria-label="Hình ảnh món ăn chay đặc trưng">
      {tiles.map((tile) => (
        <div key={tile.id} className={tile.className}>
          <img src={tile.src} alt={tile.alt} loading="eager" decoding="async" />
          <div className="tile-sheen" aria-hidden="true" />
        </div>
      ))}
      <div className="hero-image-overlay" aria-hidden="true" />
    </div>
  );
}

Object.assign(window, { ImageTiles });