// Tours.jsx — video tours page (Instagram reels). Replaced the old empty
// "Notes" page; briefly called "Reels" before launch.
//
// HOW TO ADD A REEL
//   Paste the reel's public URL into REELS below, newest first, e.g.
//     'https://www.instagram.com/reel/ABC123xyz/',
//   Instagram's own embed script turns each URL into a playable card.
//   While REELS is empty the page shows a clean "Watch on Instagram" panel —
//   never a blank page.
const REELS = [
  // Pinned on @milim.elle
  'https://www.instagram.com/reel/Dd5ubolNkQ7/',
  'https://www.instagram.com/reel/DcVrXzXRGer/',
  // Latest
  'https://www.instagram.com/reel/DeHIL6Xx4p7/',
  'https://www.instagram.com/reel/Ddyh-LwRLbF/',
  'https://www.instagram.com/reel/DdinecOxUCv/',
  'https://www.instagram.com/reel/DdMqqU5Oa3o/',
];

const INSTAGRAM_URL = 'https://www.instagram.com/milim.elle';
const INSTAGRAM_HANDLE = '@milim.elle';
const TIKTOK_URL = 'https://www.tiktok.com/@ellemlee';

// Load Instagram's embed script once, then ask it to process any new
// blockquotes (it does not watch the DOM on its own).
const useInstagramEmbeds = (count) => {
  React.useEffect(() => {
    if (!count) return;
    const process = () => window.instgrm && window.instgrm.Embeds && window.instgrm.Embeds.process();
    if (window.instgrm) { process(); return; }
    if (!document.getElementById('ig-embed-js')) {
      const s = document.createElement('script');
      s.id = 'ig-embed-js';
      s.async = true;
      s.src = 'https://www.instagram.com/embed.js';
      s.onload = process;
      document.body.appendChild(s);
    }
  }, [count]);
};

const Tours = ({ lang = 'en' }) => {
  const tr = (m) => m[lang] || m.en;
  useInstagramEmbeds(REELS.length);

  return (
    <section className="ms-reels" data-screen-label="Tours">
      <header className="ms-reels-head">
        <span className="ms-services-eyebrow">{tr({ en: 'Video tours', ko: '콘도 투어 영상', ja: 'ルームツアー動画', zh: '看房视频' })}</span>
        <h1 className="ms-reels-title">
          {tr({ en: 'Step inside.', ko: '미리 둘러보세요.', ja: '中へ、どうぞ。', zh: '走进来看看。' })}
        </h1>
        <p className="ms-reels-lede">
          {tr({
            en: 'New condos and rentals across New York, toured on camera — the views, the finishes, the light.',
            ko: '뉴욕의 신축 콘도와 임대 아파트, 방문 전에 영상으로 먼저 확인하세요. 창밖 풍경부터 마감, 채광까지 한눈에 보실 수 있습니다.',
            ja: 'ニューヨークの新築コンドミニアムと賃貸を動画でご案内 — 眺望、仕上げ、光まで。',
            zh: '用视频带您看纽约的新建公寓与租赁房源 — 景观、装修与采光。'
          })}
        </p>
      </header>

      {REELS.length > 0 ? (
        <div className="ms-reels-grid">
          {REELS.map((url) => (
            <div key={url} className="ms-reel">
              <blockquote
                className="instagram-media"
                data-instgrm-permalink={url}
                data-instgrm-version="14"
                style={{ margin: 0, width: '100%', minWidth: 0, maxWidth: '100%', border: 0 }}
              >
                <a href={url} target="_blank" rel="noopener noreferrer">
                  {tr({ en: 'Watch on Instagram', ko: '인스타그램에서 보기', ja: 'Instagramで見る', zh: '在 Instagram 上观看' })}
                </a>
              </blockquote>
            </div>
          ))}
        </div>
      ) : (
        <div className="ms-reels-empty">
          <p>
            {tr({
              en: 'The latest reels live on Instagram.',
              ko: '최신 영상은 인스타그램에서 보실 수 있습니다.',
              ja: '最新のリールはInstagramでご覧いただけます。',
              zh: '最新短视频请在 Instagram 上观看。'
            })}
          </p>
        </div>
      )}

      <div className="ms-reels-follow">
        <a className="btn btn-primary" href={INSTAGRAM_URL} target="_blank" rel="noopener noreferrer">
          {tr({ en: `Follow ${INSTAGRAM_HANDLE}`, ko: `인스타그램 ${INSTAGRAM_HANDLE}`, ja: `${INSTAGRAM_HANDLE} をフォロー`, zh: `关注 ${INSTAGRAM_HANDLE}` })}
        </a>
        <a className="btn btn-ghost" href={TIKTOK_URL} target="_blank" rel="noopener noreferrer">
          {tr({ en: 'TikTok @ellemlee', ko: '틱톡 @ellemlee', ja: 'TikTok @ellemlee', zh: 'TikTok @ellemlee' })}
        </a>
      </div>
    </section>
  );
};

window.Tours = Tours;