/* eslint-disable no-undef */
// Content section — featured film + links into the My Work galleries

/* ─── DATA ────────────────────────────────────────────────────── */
const FEATURED_FILM = {
  id: 'film-1',
  videoSrc: 'uploads/featured-film.mp4',
  note: "Every film is cut to the couple's song, their pace, their story — delivered ready to share.",
};

/* ─── HELPERS ──────────────────────────────────────────────────── */
function VideoAutoPlay({ src, poster }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const v = ref.current;
    if (!v) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) v.play().catch(() => {});
      else v.pause();
    }, { threshold: 0.25 });
    io.observe(v);
    return () => io.disconnect();
  }, []);
  return <video ref={ref} src={src} poster={poster} muted loop playsInline preload="metadata" />;
}

/* ─── FEATURED FILM ───────────────────────────────────────────── */
function FeaturedFilm() {
  const film = FEATURED_FILM;
  const videoRef = React.useRef(null);
  React.useEffect(() => {
    const v = videoRef.current;
    if (!v) return;
    const KEY = 'eabk-film-pos-' + film.id;
    const saved = parseFloat(localStorage.getItem(KEY));
    if (!isNaN(saved) && saved > 0) {
      const setPos = () => { v.currentTime = saved; v.removeEventListener('loadedmetadata', setPos); };
      if (v.readyState >= 1) setPos(); else v.addEventListener('loadedmetadata', setPos);
    }
    const onTime = () => localStorage.setItem(KEY, String(v.currentTime));
    v.addEventListener('timeupdate', onTime);
    return () => v.removeEventListener('timeupdate', onTime);
  }, []);

  return (
    <div className="film-feature">
      <div className="film-frame reveal">
        <video ref={videoRef} src={film.videoSrc} controls playsInline preload="metadata"></video>
      </div>
      <div className="film-copy reveal delay-2">
        <h3 className="film-title">More than content —<br/><span className="script">a keepsake</span></h3>
        <p>My approach to content creation combines authentic storytelling with vintage charm. I strive to create content that feels candid and refined so that you can relive your most important moments in a modern and timeless way.</p>
        <p className="film-note"><em>{film.note}</em></p>
        <a href="#save" className="btn btn-ghost">Get in Touch <Icon.Arrow /></a>
      </div>
    </div>
  );
}

/* ─── MAIN CONTENT SECTION ─────────────────────────────────────── */
function Reels() {
  return (
    <section id="content" className="reels-section">
      <div className="container">
        <div className="section-head">
          <div className="reveal eyebrow content-eyebrow">Nostalgic and Modern</div>
          <h2 className="display reveal delay-1">Love Stories</h2>
          <p className="lede reveal delay-2">
            Content you can share the very next morning — and memories that last forever.
          </p>
        </div>

        <FeaturedFilm />

        {/* Links into the My Work galleries */}
        <div className="content-tabs reveal">
          {window.WORK_CATEGORIES.map(cat => (
            <a key={cat.slug} className="content-tab" href={`#work/${cat.slug}`}>
              {cat.title}
            </a>
          ))}
        </div>

        <p className="reels-note reveal delay-4">
          Follow along on <a href="https://www.instagram.com/everafterbykate/reels/" target="_blank" rel="noopener">Instagram</a> for the latest
        </p>
      </div>
    </section>
  );
}

window.Reels = Reels;
window.VideoAutoPlay = VideoAutoPlay;