/*
 * 공개 히어로 배경 회전 슬라이드 (§3C-V 확장) — 실사진 5장 크로스페이드.
 * 각 히어로 배경 레이어(.kxp-hero__bg / .kxp-vhero__bg) 내부에 절대배치 자식으로 삽입한다.
 * 회전 로직은 usePublicMotion.ts([data-hero-slides])가 담당(간격·정지조건·prefers-reduced-motion).
 * 장식 배경이므로 aria-hidden + alt="" (헤드라인/스크림이 의미 전달). 로드 실패 시 그라디언트 폴백 노출.
 * 이미지 alt(감사용): _workspace/hero_images.md — hero-1 곡면유리 파사드 … hero-5 제2전시장 돔.
 */
const HERO_COUNT = 5;

export function PublicHeroSlides() {
  return (
    <div className="pub-hero__slides" data-hero-slides aria-hidden>
      {Array.from({ length: HERO_COUNT }, (_, i) => {
        const n = i + 1;
        const first = i === 0;
        return (
          <img
            key={n}
            className={`pub-hero__slide${first ? ' is-active' : ''}`}
            src={`/media/hero/hero-${n}.jpg`}
            alt=""
            data-slide={i}
            draggable={false}
            decoding="async"
            loading={first ? 'eager' : 'lazy'}
            fetchPriority={first ? 'high' : 'low'}
            onError={(e) => {
              // 로드 실패: 회전 대상에서 제외하고 그라디언트 폴백이 비치도록 숨김(비파괴).
              const img = e.currentTarget;
              img.dataset.failed = '1';
              img.classList.remove('is-active');
              img.style.display = 'none';
            }}
          />
        );
      })}
    </div>
  );
}
