// Hero.jsx — full-bleed video hero, theme-switching imagery
const Hero = ({ onContact, lang = 'EN', onSeeListings }) => {
  const isKR = lang === 'KR';

  // Two HD clips from Pexels (royalty-free, CC0).
  // Dark mode: aerial Brooklyn Bridge at night.
  // Light mode: Brooklyn Bridge by day, sunny NYC.
  // Using <source> fallback chains in case any CDN URL goes 404 — the
  // browser tries each in order until one plays.
  const VIDEOS_DARK = [
    'https://videos.pexels.com/video-files/5838621/5838621-hd_1920_1080_30fps.mp4',
    'https://videos.pexels.com/video-files/5838621/5838621-uhd_2560_1440_30fps.mp4',
  ];
  // Light mode: Brooklyn Bridge by day + sunny NYC fallbacks.
  // 5796436 — Aerial drone of NYC, bright day, Brooklyn Bridge in frame.
  // 8491151 — Drone of lower Manhattan buildings, clear blue sky.
  // 9368738 — Brooklyn Bridge daytime (last resort).
  const VIDEOS_LIGHT = [
    'https://videos.pexels.com/video-files/5796436/5796436-hd_1920_1080_30fps.mp4',
    'https://videos.pexels.com/video-files/8491151/8491151-hd_1920_1080_25fps.mp4',
    'https://videos.pexels.com/video-files/9368738/9368738-hd_1920_1080_30fps.mp4',
  ];

  // Poster fallbacks (still frames in case video fails or is slow to load).
  const POSTER_DARK  = 'https://images.pexels.com/photos/2129796/pexels-photo-2129796.jpeg?auto=compress&cs=tinysrgb&w=1920';
  const POSTER_LIGHT = 'https://images.pexels.com/photos/2190283/pexels-photo-2190283.jpeg?auto=compress&cs=tinysrgb&w=1920';

  return (
    <>
      <section className="ms-hero ms-hero-video" data-screen-label="Hero">
        <div className="ms-hero-stage" aria-hidden="true">
          <video
            className="ms-hero-vid ms-hero-vid--light"
            poster={POSTER_LIGHT}
            autoPlay muted loop playsInline preload="auto"
            crossOrigin="anonymous"
          >
            {VIDEOS_LIGHT.map((src) => (
              <source key={src} src={src} type="video/mp4" />
            ))}
          </video>
          <video
            className="ms-hero-vid ms-hero-vid--dark"
            poster={POSTER_DARK}
            autoPlay muted loop playsInline preload="auto"
            crossOrigin="anonymous"
          >
            {VIDEOS_DARK.map((src) => (
              <source key={src} src={src} type="video/mp4" />
            ))}
          </video>
          <div className="ms-hero-scrim" />
        </div>

        <div className="ms-hero-lockup">
          <span className="ms-hero-eyebrow">
            {isKR ? '뉴욕 · 부동산' : 'New York · Real Estate'}
          </span>
          <h1 className="ms-hero-headline">
            {isKR ? (
              <>알맞은 집,<br />알맞은 동네에서.</>
            ) : (
              <>The right home,<br />on the right block.</>
            )}
          </h1>
          <p className="ms-hero-lede">
            {isKR
              ? '뉴욕에서 신축 개발과 해외 이주, 그리고 알맞은 블록을 찾는 조용한 작업을 함께합니다 — 한국어로 편하게.'
              : 'New Development. International relocation. The quiet work of finding the right block.'}
          </p>
          <div className="ms-hero-cta">
            <button className="btn btn-primary" onClick={onContact}>
              {isKR ? '상담 예약' : 'Book a viewing'}
            </button>
            <button className="btn btn-ghost" onClick={onSeeListings}>
              {isKR ? '현재 매물 보기' : 'See current listings'}
            </button>
          </div>
        </div>

        <div className="ms-hero-scroll" aria-hidden="true">
          <span>{isKR ? '아래로' : 'Scroll'}</span>
          <span className="line" />
        </div>
      </section>

      <section className="ms-hero-strip" aria-label={isKR ? '실무 정보' : 'At a glance'}>
        <div className="pair">
          <span className="k">{isKR ? '전문 분야' : 'Specialties'}</span>
          <span className="v">
            {isKR ? '신축 개발 · 해외 이주 · 부동산 투자' : 'New Development · International Relocation · Investments'}
          </span>
        </div>
        <div className="pair">
          <span className="k">{isKR ? '주요 고객' : 'For'}</span>
          <span className="v">
            {isKR
              ? '주재원 · 장기 & 단기 연수 · 유학생 · 이민 · 첫 내집 마련 · 투자자'
              : 'Corporate transferees · Long & short-term assignees · International students · Relocating families · First-time buyers · Investors'}
          </span>
        </div>
      </section>
    </>
  );
};

window.Hero = Hero;