// Hero — 첫 화면 영상 (카피는 영상 안에 포함, 검색엔진용 제목은 화면에서 숨김)
const Hero = () => {
  const videoRef = React.useRef(null);

  React.useEffect(() => {
    const v = videoRef.current;
    if (!v) return;

    // '동작 줄이기' 설정 사용자는 영상 대신 대표 이미지만 보여줌
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
      v.removeAttribute('autoplay');
      v.pause();
      return;
    }

    // 아이폰 사파리 자동재생 조건: 음소거를 코드로 한 번 더 확정
    v.muted = true;
    const p = v.play();
    if (p && p.catch) p.catch(() => {}); // 자동재생이 막혀도 오류 없이 대표 이미지 유지
  }, []);

  return (
    <section id="top" style={{
      position: 'relative',
      backgroundColor: '#F5F1EA',   // 영상 배경과 같은 크림색 (로딩 중 이음새 방지)
      paddingTop: '4.75rem'         // 고정 헤더 높이만큼 영상을 아래로 내림
    }}>
      {/* 검색엔진용 제목 — 화면에는 보이지 않음 */}
      <h1 style={{
        position: 'absolute', width: '1px', height: '1px', padding: 0, margin: '-1px',
        overflow: 'hidden', clip: 'rect(0,0,0,0)', whiteSpace: 'nowrap', border: 0
      }}>
        브랜드의 성장을 설계하는 마케팅 파트너 싱크온
      </h1>

      <video
        ref={videoRef}
        src={`assets/hero-video.mp4?v=${window.ASSET_VER}`}
        poster={`assets/hero-poster.jpg?v=${window.ASSET_VER}`}
        autoPlay
        muted
        loop
        playsInline
        preload="auto"
        aria-label="광고 없이는 안 팔리나요? 문제는 광고비에 의존하는 마케팅. 싱크온의 마케팅 로직 소개 영상"
        style={{
          display: 'block',
          width: '100%',
          aspectRatio: '16 / 9',
          maxHeight: 'calc(100vh - 4.75rem)',
          objectFit: 'cover',
          backgroundColor: '#F5F1EA'
        }}
      />
    </section>
  );
};

window.Hero = Hero;