/*
 * 공개 히어로 배경 회전 슬라이드 (§3C-V 확장) — 실사진 크로스페이드.
 * 각 히어로 배경 레이어(.kxp-hero__bg / .kxp-vhero__bg) 내부에 절대배치 자식으로 삽입한다.
 * 회전 로직은 usePublicMotion.ts([data-hero-slides])가 담당(간격·정지조건·prefers-reduced-motion).
 * 장식 배경이므로 aria-hidden + alt="" (헤드라인/스크림이 의미 전달). 로드 실패 시 그라디언트 폴백 노출.
 *
 * slides 미지정 시 기본 킨텍스 전경(hero-1~7). 트랙별로 다른 셋을 넘길 수 있다(예: track-visitor-*).
 * 인디케이터 도트(PublicHeroDots)는 배경이 아닌 전경(히어로 직속 자식)으로 배치해야 스크림 위에 보인다
 *  — 배경 레이어(z-index 0/-2)에 넣으면 스크림/콘텐츠 아래로 가려지기 때문.
 * 이미지 alt(감사용): _workspace/hero_images.md · demo_images_summary.md.
 */

/** 기본 히어로 배경 세트(킨텍스 전경/파사드 크롤 자산). */
const DEFAULT_SLIDES = Array.from({ length: 7 }, (_, i) => `/media/hero/hero-${i + 1}.jpg`);

export function PublicHeroSlides({ slides = DEFAULT_SLIDES }: { slides?: string[] }) {
  return (
    <div className="pub-hero__slides" data-hero-slides aria-hidden>
      {slides.map((src, i) => {
        const first = i === 0;
        return (
          <img
            key={src}
            className={`pub-hero__slide${first ? ' is-active' : ''}`}
            src={src}
            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>
  );
}

/**
 * 히어로 인디케이터 도트 — Nifty 페이지네이션 규칙(--radius-pill·현재강조·gap --space-2).
 * 전경(히어로 직속 자식)으로 배치(z-index 상위). 회전과 동기화는 usePublicMotion([data-hero-dots]).
 * 장식 인디케이터라 비상호작용(pointer-events:none) + aria-hidden — 슬라이드는 장식 배경이므로 접근성 의미 없음.
 */
export function PublicHeroDots({ count }: { count: number }) {
  if (count < 2) return null;
  return (
    <div className="kxp-hero-dots" data-hero-dots aria-hidden>
      {Array.from({ length: count }, (_, i) => (
        <span key={i} className={`kxp-hero-dots__dot${i === 0 ? ' is-active' : ''}`} data-dot />
      ))}
    </div>
  );
}
